Question

我正在渲染一个列表，然后是一个子列表。我希望对我的内部列表有一个引用，它将被命名为list-{id}。但是，我无法做到这一点。

以下是代码段：

<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

Answer 1

在您的示例中，您指定ref字面上应该命名为"getSchoolableRef(componany.id)"。这就是$refs对象包含getScrollableRef(company.id)属性的原因，其中包含13个元素的数组作为其值。

如果您想使用getSchoolableRef方法的结果作为ref的名称，可以使用v-bind或速记冒号：

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

正如您所提到的，$refs不是被动的，一旦组件初始化，更改绑定值将不会更新$refs中的属性名称。但是，您可以在组件初始化时动态设置ref的名称。

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

1 个答案: