Question

我为一个版本动态创建了输入（包含元素的列表，每个元素都有自己的ID）。只有在触发了特定元素的编辑时，所有这些都只有v-if。因此，我不能使用$refs，因为Vue在参考文献中没有看到。

我该如何解决？我真的不想为此添加jQuery，或者每次我需要使用类似的东西时都必须使用vanilla。

Answer 1

通常，我们有例如在编辑之前span，并且会使用v-show而不是v-if，因为我们在编辑后仍需要它，并且每个input都与其span相关联所以event.target.nextSibling.focus()这样的东西就可以完成这项工作。

我更喜欢event.target...到$refs，因为声明$refs会增加组件结构的复杂性，而另一个只是点击事件中的相关内容。

Answer 2

如果你真的想避免使用vanilla js（除了聚焦），那么我建议你必须将列表元素移动到一个组件中：

＆＃13;

Vue.component('list-items', {
    template: 
    	`<div>
        	<button @click="edit">edit</button>
            <input v-if="editing" ref="input" type="text" :value="value" @input="$emit('input', $event.target.value)">
    	</div>`,
    props: ['value'],
    data () {
    	return {
        	editing: false,
        }
    },
    methods: {
    	edit () {
        	this.editing = !this.editing
            if (this.editing) {
            	this.$nextTick(() => {
                	this.$refs.input.focus()
                })
            }
        },
    },
})

new Vue({
    el: '#app',
    data: {
        list: [{
            title: 'foo',
        }, {
            title: 'bar',
        }]
    },
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <list-items v-model="item.title" v-for="item in list"></list-items>
    <pre>{{ list }}</pre>
</div>

＆＃13;

动态创建输入。不能使用$ refs所以如何获得例如焦点？

2 个答案: