Question

我有vue组件，其中包含v-for和按钮“添加”。

<v-text-field
    v-for="(i, item) in items"
    ref="test"
></v-text-field>

<button @click="add()">add</button>

和JS：

methods: {
    add() {
        this.items.push('');
        this.$refs['test'][this.items.length-1].focus();
    }
}

，我想集中注意刚刚添加的元素，但是实际上我执行focus()时方法元素不存在-因为v-for将在方法add()完成后上载

如何强制更新模板，然后在最后一个元素上执行此focus方法？

Answer 1

稍微创建自己v-focus directive，然后在inserted上使用传递给指令的el参数调用focus()。

Vue.directive('focus', {
  inserted (el) {
    el.focus();
  }
})

new Vue({
  el: '#example',
  data: {
    inputs: ['', '', '']
  },
  methods: {
    add () {
      this.inputs.push('')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="example">
  <input v-for="(input, i) in inputs" v-focus />
  
  <button @click="add">add</button>
</div>

vue-强制重新加载模板，然后执行操作

1 个答案: