正确使用Vue $ refs

Question

我试图在我的vue组件上重新创建这个精确的内联编辑功能.但是,我可能错了,我看到一些语法已经过时Vue,特别是v-el正在使用的指令.我试图像这样更新语法:

new Vue({
  el: '#app',
  data: {
    numbers: [{
        val: 'one',
        edit: false
      },
      {
        val: 'two',
        edit: false
      },
      {
        val: 'three',
        edit: false
      }
    ]
  },

  methods: {
    toggleEdit: function(ev, number) {
      number.edit = !number.edit

      // Focus input field
      if (number.edit) {
        Vue.nextTick(function() {
          ev.$refs.input.focus(); // error occurs here
        })
      }
    },

    saveEdit: function(ev, number) {
      //save your changes
      this.toggleEdit(ev, number);
    }
  }
})

<div id="app">
  <template v-for="number in numbers">
        <span v-show="!number.edit"
              v-on:click="toggleEdit(this, number)">{{number.val}}</span>

        <input type="text"
               ref="input"
               v-model="number.val"
               v-show="number.edit"
               v-on:blur="saveEdit(ev, number)"> <br>
    </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

但是我收到了一系列错误...有关如何正确执行此操作的任何建议？

这是错误:

[Vue警告]:nextTick出错:"TypeError:undefined不是对象(评估'ev.$ refs.input')"

Answer 1

许多事情从Vue.js 1.x变为2.x. 我将引导您完成您的片段中所需的更改:

• v-repeat 应该 v-for
• Remplace v-el="input"withref="input"
  • 由于您在ref="input"内部使用a v-for,因此this.$refs.input将是一个元素数组,而不是单个元素.
  • 要访问每个单独的元素,您将需要一个索引(对于数组),这就是您应该index在以下内容中包含变量的原因v-for:v-for="(number, index) in numbers"
  • 将index 代替而不是ev函数传递给函数,以便<input>稍后使用vm.$refs.input[index].focus();

这就是它.改变后你会得到:

new Vue({
  el: '#app',
  data: {
    numbers: [
        {
            val: 'one',
            edit: false
        },
        {   val: 'two',
            edit: false
        },
        {
            val: 'three',
            edit: false
        }
    ]
  },
  methods: {
    toggleEdit: function(index, number){
        number.edit = !number.edit;

        // Focus input field
        var vm = this;
        if (number.edit){
            Vue.nextTick(function() {
                vm.$refs.input[index].focus();
            })   
        }
    },

    saveEdit: function(index, number){
        //save your changes
        this.toggleEdit(index, number);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
    <template v-for="(number, index) in numbers">
        <span v-show="!number.edit"
              v-on:click="toggleEdit(index, number)">{{number.val}}</span>

        <input type="text"
               ref="input"
               v-model="number.val"
               v-show="number.edit"
               v-on:blur="saveEdit(index, number)"> <br>
    </template>
</div>