ref 相关问题

我正在用 Vue 3 做一个翻转纸牌游戏并使用。当我尝试在选择两张不同的卡片时处理卡片翻转时遇到了麻烦。我的代码旨在翻转卡片，使用它......</desc> <question vote="1"> <p>我正在使用 Vue 3 并使用 <pre><code><script setup></code></pre> 制作翻转纸牌游戏。当我尝试在选择两张不同的卡片时处理卡片翻转时遇到了麻烦。我的代码旨在在选择错误时翻转卡片使用其索引</p> <ul> <li>文件 InteractScene.vue</li> </ul> <pre><code><script setup> import CardGame from "@/components/CardGame.vue"; import { ref } from "vue"; const rules = ref([]); defineProps({ cardContext: { type: Array, default: () => [] } }); const checkRule = (card) => { let rule = rules.value; if (rule.length === 2) return false; rule.push(card); if (rule.length === 2 && rule[0].value === rule[1].value) { console.log("true..."); } else if (rule.length === 2 && rule[0].value !== rule[1].value) { console.log(`card-${rule} and card-${rule[1].index}`); ref.value[`card-${rule[0].index}`][0].onFlipBackCard(); ref.value[`card-${rule[1].index}`][0].onFlipBackCard(); } else return false; }; </script> <template> <div class="scene"> <h1>Interact Component here</h1> <CardGame v-for="(card, index) in cardContext" :key="index" :ref="`card-${index}`" :img-back-face-url="`images/${card}.png`" v-bind:card="{ index, value: card }" :rules="rules" @flip="checkRule($event)" /> </div> </template> </code></pre> <ul> <li>文件 CardGame.vue</li> </ul> <pre><code><script setup> import { ref } from "vue"; const emits = defineEmits(["flip"]); const isFlipped = ref(false); // eslint-disable-next-line vue/valid-define-props const { card, imgBackFaceUrl } = defineProps({ card: [String, Number, Array, Object], imgBackFaceUrl: String }); const onToggleFlipCard = () => { isFlipped.value = !isFlipped.value; if (isFlipped.value) { emits("flip", card); } }; const onFlipBackCard = () => { isFlipped.value = false; } </script> <template> <div class="card"> <div class="card-inner" :class="{'is-flipped': isFlipped}" v-on:click="onToggleFlipCard" > <div class="card-face card_face-font"> <div class="card-content"></div> </div> <div class="card-face card_face-back"> <div class="card-content" :style="{ backgroundImage: `url('/src/assets/${imgBackFaceUrl}')`}"> </div> </div> </div> </div> </template> </code></pre> <p>我在网络控制台上收到此错误 <a href="https://i.stack.imgur.com/AZZZf.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0FaWlpmLnBuZw==" alt="enter image description here"/></a></p> <p>在我看来，问题可能是提供者或接收者没有提供参考。在 InteractScene.vue 中，错误来自</p> <pre><code>... ref.value[`card-${rule[0].index}`][0].onFlipBackCard(); ref.value[`card-${rule[1].index}`][0].onFlipBackCard(); ... </code></pre> <p>而GameCard.vue中，onFlipBackCard就是参考函数</p> <pre><code>const onFlipBackCard = () => { isFlipped.value = false; } </code></pre> <p>我在上面的代码中使用正常的<pre><code><script></code></pre>并且它可以工作。我是 Vue 3 的新手，所以我仍然想使用 <pre><code><script setup></code></pre> 来获取更多知识。我希望我能在<pre><code><script setup></code></pre>中获得解析代码。</p> <p>正常<pre><code><script></code></pre>代码：</p> <ul> <li>InteractScene.vue</li> </ul> <pre><code><script> import CardGame from "@/components/CardGame.vue"; export default { props: { cardContext: { type: Array, default: function () { return [] } } }, components: { CardGame }, data() { return { rules: [] }; }, methods: { checkRule(card){ console.log(card) if(this.rules.length === 2) return false this.rules.push(card) if(this.rules.length === 2 && this.rules[0].value === this.rules[1].value){ console.log("true...") } else if(this.rules.length === 2 && this.rules[0].value !== this.rules[1].value){ console.log("Wrong...") this.$refs[`card-${this.rules[0].index}`][0].onFlipBackCard(); this.$refs[`card-${this.rules[1].index}`][0].onFlipBackCard(); this.rules = [] } else return false } } }; </script> </code></pre> <ul> <li>CardGame.vue</li> </ul> <pre><code><script> export default { props: { card: { type: [String, Number, Array, Object] }, imgBackFaceUrl: { type: String, required: true } }, data() { return { isFlipped: false }; }, methods: { onToggleFlipCard() { this.isFlipped = !this.isFlipped; if(this.isFlipped) this.$emit("flip", this.card) }, onFlipBackCard(){ this.isFlipped = false } } } </script> </code></pre> <p>我的源代码：<a href="https://github.com/Jdsatashi/Vue-PokeGame" rel="nofollow noreferrer">https://github.com/Jdsatashi/Vue-PokeGame</a></p> </question> <answer tick="false" vote="0"> <p><pre><code>ref.value</code></pre> 与 <pre><code>this.$refs</code></pre> 不同。相关的 Vue 3 文档应该可以解决这个问题，那就是 <a href="https://vuejs.org/guide/essentials/template-refs.html#template-refs" rel="nofollow noreferrer">Template Refs</a> 上的页面。</p> <p>您必须声明自己的自定义 <pre><code>ref</code></pre> 数组，它将保存 DOM 元素的 <pre><code>:ref=</code></pre> 属性。 ref 属性也应该与您的 ref 变量名称完全相同。</p> <pre><code>const cards = ref([]) </code></pre> <pre><code><CardGame v-for="(card, index) in cardContext" :ref="cards" ... /> </code></pre> <p><pre><code>cards</code></pre> 是一个可搜索的索引数组，您可以在代码中的其他位置引用以在需要时查找所需的任何元素。</p> <pre><code>cards.value[0].onFlipBackCard(); </code></pre> <hr/> <p>作为旁注，我建议使用比索引更好的<pre><code>:key</code></pre>，因为它对于跟踪列表的更改并不可靠。它在某些情况下可以正常使用，但如果您的应用程序涉及任何类型的添加、删除或更改您的卡列表，您将需要一个独特的属性，例如某种唯一的 id。</p> </answer> </body></html>

javascript vue.js vuejs3 ref

回答 0 投票 0

React - useRef 与 TypeScript 和功能组件

我正在尝试使用 useRef 从父组件调用子组件方法。将来，SayHi 方法将更新子组件中的钩子状态。不幸的是，我有错误......

reactjs typescript ref tsx react-functional-component

回答 3 投票 0

与 rust RefCell<T> 和 Ref

我正在努力解决为什么下面的代码无法编译。我正在尝试创建一个具有两个节点的双向链表。然后从子节点指针访问父节点的值。使用 std::cell::RefCell...

rust ref refcell

回答 1 投票 0

使用 { ref } 检索 div 坐标

我正在 VUeJS 的聊天项目中工作，我想创建一个工具提示，出现在我将鼠标指针悬停在其上的用户名顶部。这是我的代码：我正在 VUeJS 的聊天项目中工作，我想创建一个工具提示，出现在我将鼠标指针悬停在用户名上的工具提示。这是我的代码： <template> <Tooltip :user="user" :selectedUser="tooltipUser" :left="left" :top="top" v-if="tooltipVisible" /> <div class="socialUsers" v-show="activeTab === 'users'"> <div class="user" v-for="user in users" :key="user.id"> <img class="avatar" :src="getUserAvatarUrl(user.avatar)" :alt="user.username" ref="chatTooltip" @click="displayTooltip(user)"> <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span> </div> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' import User from '@/models/user.model' import Tooltip from '@/components/profile.tooltip.vue' defineProps<{ activeTab: string users: User[] user: User | null }>() const tooltipVisible = ref(false) const tooltipUser = ref<User | null>(null) const user = ref(tooltipUser) const left = ref(0) const top = ref(0) const displayTooltip = (user: User): void => { tooltipUser.value = user tooltipVisible.value = !tooltipVisible.value const chatTooltip = this.$refs.chatTooltip if (chatTooltip) { const rect = chatTooltip.getBoundingClientRect() left.value = rect.x top.value = rect.y } } const getUserAvatarUrl = (filename: string): string => { return `http://${process.env.VUE_APP_BACKEND_HOST}:${process.env.VUE_APP_BACKEND_PORT}/users/avatar/${filename}` } </script> 我想将我想要使用 this.$refs.chatTooltip 检索的变量“left”和“top”传递给工具提示组件有可能吗？有更好的解决方案吗？非常感谢您的帮助，棒极了我不确定是否正确理解了你的问题。但我认为这是关于找到被点击的img的ref。这里您的 ref chatTooltip 是一个数组（如 v-for 中的 Refs 所示）。您应该能够使用被单击的用户的索引来获取正确的引用。我不太确定我的TS代码，但应该是这样的。 <div class="user" v-for="(user,i) in users" :key="user.id"> <img class="avatar" :src="getUserAvatarUrl(user.avatar)" :alt="user.username" ref="chatTooltips" @click="displayTooltip(user,i)"> <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span> </div> const tooltipVisible = ref(false) const tooltipUser = ref<User | null>(null) const user = ref(tooltipUser) const left = ref(0) const top = ref(0) const chatTooltips = ref([]) const displayTooltip = (user: User, i: number): void => { tooltipUser.value = user tooltipVisible.value = !tooltipVisible.value const chatTooltip = chatTooltips.value[i] if (chatTooltip) { const rect = chatTooltip.getBoundingClientRect() left.value = rect.x top.value = rect.y } }

javascript typescript vuejs3 ref

回答 1 投票 0

在自定义模式中实现 dbt 模型

我的dbt项目中有model2.sql 选择 * 来自 {{ ref('model1') }} 编译后我需要得到选择 * 来自 'dwh'.'analytics'.'model1' 并将其具体化为模式“analytics_test ...

model macros materialize ref dbt

回答 1 投票 0

this.$refs.myForm.validate 不是我的 vue 组件中的函数

规则有效并显示正确的验证消息。当 this.valid 为 false 时，该按钮被禁用。每次输入都会调用 checkTextBoxValidation 方法来检查 ...

typescript vue.js validation vuetify.js ref

回答 1 投票 0

为什么在使用 ref 时不传递样式组件对象的值

styled-component Styled = styled.divmargin: 0; 的值未传递给 ref 元素。但是当我使用内联样式时，样式会传递给元素。请参阅附图。使用我...

reactjs dom styled-components ref inline-styles

回答 0 投票 0

如何在功能组件中访问映射 div 的内容（DOM 节点）

我的代码：https://codesandbox.io/s/quirky-wescoff-44n2by?file=/src/App.js 当我将鼠标悬停在任何元素上时，总是在控制台中打印数组的最后一个元素。我尝试使用 ref，不确定我是否...

javascript reactjs arrays dom ref

回答 2 投票 0

ref 相关问题

最新问题