Question

我的dom中有一些动态<input>元素来自vue中的for循环。我需要通过向每个引用添加一个Id来为每个引用添加ref属性，如element1，element2，..等。如何在vue中执行此操作？

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

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

Answer 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，我添加了一个由Template literals提供支持的示例。

Answer 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>

Answer 3

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

null

Optional

如何在vue.js中添加动态参考？

3 个答案: