如何在 vue.js 中添加动态引用？答案

【问题标题】：How to add dynamic ref in vue.js?如何在 vue.js 中添加动态引用？
【发布时间】：2018-01-15 17:29:46
【问题描述】：

我的 dom 中有一些动态的 <input> 元素是从 vue 中的 for 循环渲染的。我需要通过将 Id 附加到每个 ref （如 element1、element2、..等）来为它们中的每一个添加 ref 属性。在vue中如何做到这一点？

<div v-for="(result, index) in data" :key="index">
    <input type="text" type="file" ref="element" />
</div>

如果存在result.id，如何添加ref

【问题讨论】：

我正在对我的应用程序做类似的事情，当动态地将引用添加到我的组件时，它似乎减慢了很多。至少我认为这就是正在发生的事情。好奇你是否经历过类似的事情。

标签： vue.js

【解决方案1】：

只需像:ref="'element' + result.id" 或ref="`element${result.id}`" 一样使用v-bind。

检查fiddle here。

new Vue({
  el: '#app',
  data: {
    data: [{id: 1}, {id: 2}, {id: 3}],
  },
  mounted() {
    console.log(this.$refs);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
<div v-for="(result, index) in data" :key="index">
    <input type="text" type="file" :ref="'element' + result.id" />
</div>
</div>

编辑：感谢 Vamsi 的编辑，我将 index 替换为 result.id
8/28 编辑：感谢 grokpot，我添加了一个由模板文字提供支持的示例。

【讨论】：

@VamsiKrishna 非常感谢您的编辑。我再次更改了一些代码以使其正常工作。
这会产生一个数组。见github.com/vuejs/vue/issues/2044
你也可以使用模板文字：ref="`element${result.id}`")
@grokpot 是的，但不要忘记ref 之前的:，否则 ref 将是 `element${result.id}`

【解决方案2】：

使用v-bind:ref 或仅使用:ref。

下面是一个简单的例子，包括如何访问动态ref

<template>
    <div>
        <div class="inputs" v-for="input in inputs" :key="input.id">
            <input type="text" v-model="input.name" :ref="'name' + input.id">
            <button @click="displayRef('name' + input.id)">
                 Click to see the input ref
            </button>
            <hr>
            <button @click="displayAllRefs">Click to see all refs</button>
        </div>
    </div>
</template>

还有脚本：

<script>
    export default {
        data() {
            return {
                inputs: [
                    { id: Date.now(), name: '', lastName: '' }
                ]
            }
        },
        methods: {
            displayRef(ref) {
                console.log(this.$refs[ref]) // <= accessing the dynamic ref
                console.log('The value of input is:',this.$refs[ref][0].value) //<= outpouting value of input
            },
            displayAllRefs() {
                console.log(this.$refs)
            }
        }
    }
</script>

【讨论】：

为什么必须使用[0] 访问引用？
@TobiasFeil 在v-for 中使用引用时，this.$refs[key] 返回一个元素数组而不是单个元素，即使只有一个元素存在。 vuejs.org/v2/guide/…

【解决方案3】：

你有动态的 refs 并且有多个元素。要定位任何单个节点，只需在方法参数中传递索引

     new Vue({
      el: '#app',
      data: {
        data: [{id: 1}, {id: 2}, {id: 3}],
      },
       methods: {
      addNewClass(index) {
      
      this.$refs.element[index].classList.add('custom-class')
    }
  },
    
    })

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

     
<div id="app">
  <div v-for="(result, index) in data" :key="index">
   <div ref='element' @click='addNewClass(index)' class='custom-container'>
        
   </div>
</div>

【讨论】：