无法在Vue.js中动态创建ref

我正在渲染一个列表，然后是其中的一个子列表。我想有一个名为list-{id}的内部列表。但是，我无法做到这一点。无法在Vue.js中动态创建ref

这里是代码片段：

<ul class="scrollable-list" ref="getScrollableRef(company.id)"> 
    <li v-for="operation in getOperations(company.id)"> 
    {{company.name}} 
    </li> 
</ul>

当我检查$refs对象：

$vm0.$refs 
Object {getScrollableRef(company.id): Array(13)}

我认为，由于某些原因，价值不被评估。有没有人遇到过这个？

编辑：我试图解决这个问题https://github.com/egoist/vue-mugen-scroll/issues/14

来源

2017-05-30 aks

在你的榜样，您指定的ref应该从字面上被命名为"getSchoolableRef(componany.id)"。这就是为什么$refs对象包含一个具有13个元素数组作为其值的getScrollableRef(company.id)属性。

如果你想使用getSchoolableRef法作为ref名的结果，你可以使用v-bind或简写冒号：

<ul class="scrollable-list" :ref="getScrollableRef(company.id)">

至于你提到的$refs是不是反应并改变绑定值在组件初始化后不会更新$refs中的属性名称。但是，组件初始化时可以动态设置ref的名称。

来源

2017-05-30 17:42:10 thanksd

它在这里说，我们不应该试图绑定参考。它是否正确？ https://vuejs.org/v2/api/#ref – aks

好的。我会更新答案。这就是说'$ refs'没有反应，如果你改变了限制值的更新，它将不会更新。但是，我没有看到使用'v-bind'初始化ref名称的问题。 – thanksd

无法在Vue.js中动态创建ref

回答

相关问题