使用 Vue 将焦点设置在输入元素上

Question

我尝试编写一个内联编辑元素。单击后，我喜欢将重点放在输入上。这是我的代码：

        <span v-show="!name.edit" @click="toggleEdit(this, name)">{{name.val}}</span>

            <input type="text"
                   v-model="name.val"
                   v-show="name.edit"
                   v-on:blur=" saveEdit(this, name)"
                   >
        </div>

        data: function () {
            return {
                name: {
                    val: '',
                    edit: false
                },

            }
        },

        methods: {
            ...mapMutations([

            ]),
            toggleEdit: function(ev, obj){

                obj.edit = !obj.edit;

                console.log(obj)
                if(obj.edit){
                    Vue.nextTick(function() {
                      ev.$$.input.focus();  
                    })
                }
            },

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

但是还是不行。

Answer 1

尝试将 $ref 放入该特定输入中，并且 vue.nextTick 应该是 this.$nextTick： 像这样：

<input type="text"
      ref="inputVal"
                   v-model="name.val"
                   v-show="name.edit"
                   v-on:blur=" saveEdit(this, name)"
                   >

this.$nextTick(function() {
          this.$refs.inputVal.focus();
        });

https://codesandbox.io/s/keen-sutherland-euc3c

通常对于动态元素我会这样做：

<template>
  <div>
    <template v-for="name in names">
      <span :key="name.name" v-show="!name.edit" @click="toggleEdit(this, name)">{{name.val}}</span>
      <input
        :key="name.name"
        type="text"
        :ref="name.val"
        v-model="name.val"
        v-show="name.edit"
        v-on:blur=" saveEdit(this, name)"
      >
    </template>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: function() {
    return {
      names: [
        {
          val: "TEST1",
          edit: true
        },
        {
          val: "TEST2",
          edit: true
        },
        {
          val: "TEST3",
          edit: true
        }
      ]
    };
  },
  methods: {
    toggleEdit: function(ev, obj) {
      obj.edit = !obj.edit;

      console.log(obj);
      if (obj.edit) {
        this.$nextTick(function() {
          this.$refs[`${obj.val}`][0].focus();
        });
      }
    },

    saveEdit: function(ev, obj) {
      //save your changes
      this.toggleEdit(ev, obj);
    }
  }
};
</script>