我尝试在 v-for
循环中使用组件并初始化 ref
以便将来从父级访问这些方法的一些方法。这是我案例的简化代码:
<template>
<div class="hello">
{{ msg }}
<ul>
<list-item
v-for="item in items"
:key="item.id"
:value="item.text"
:ref="`item${item.id}`"
/>
</ul>
</div>
</template>
<script>
import ListItem from "./ListItem";
export default {
name: "HelloWorld",
components: {
ListItem
},
data() {
return {
msg: "Welcome to Your Vue.js App",
items: [
{ id: 1, text: "foo" },
{ id: 2, text: "bar" },
{ id: 3, text: "baz" },
{ id: 4, text: "foobar" }
]
};
},
mounted() {
setTimeout(() => this.$refs.item2.highlight(), 1500);
}
};
</script>
和 ListItem
组件:
<template>
<li v-bind:class="{ highlight: isHighlighted }">
{{value}}
</li>
</template>
<script>
export default {
name: "list-item",
props: ["value"],
data() {
return {
isHighlighted: false
};
},
methods: {
highlight() {
this.isHighlighted = !this.isHighlighted;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.highlight {
color: red;
}
</style>
它只是呈现一些列表项并在一秒半后突出显示其中一个。但我得到一个错误: Uncaught TypeError: _this.$refs.item2.highlight is not a function
在调试会话之后,我发现了一个有趣的事实:在 v-for
循环中定义的引用不是组件,而是具有一个组件的数组。
什么是逻辑,什么是 f 包装器?有人遇到这种情况吗?有人可以解释这种行为吗?
上面提供的代码适用于 setTimeout(() => this.$refs.item2[0].highlight(), 1500);
我必须总是通过 [0]
吗?有没有更好的方法?请帮忙。
原文由 Lev Khruschev 发布,翻译遵循 CC BY-SA 4.0 许可协议
当使用带有 v-for 的 refs 时,组件/DOM 节点作为数组直接存储到变量名称中,因此您不需要在 ref 名称中使用索引号。所以你可以这样做:
并像这样在组件中使用 refs:
另请注意,裁判可能不按顺序排列,需要以不同的方式处理,这是一个完全不同的问题。你可以在这里关注: https ://github.com/vuejs/vue/issues/4952