使用 Vue 单击并编辑文本输入

Question

我正在寻找一个点击编辑 Vue 组件。

我找到 了一个小提琴 并进行了一些编辑。它是这样工作的：

小提琴在这里。

问题： 我需要额外的点击来使输入集中。我怎样才能让它自动聚焦？

来自小提琴的代码。 HTML:

 <div id="app">
Click the values to edit!
  <ul class="todo-list">
    <li v-for = "todo in todos">
      <input v-if = "todo.edit" v-model = "todo.title"
      @blur= "todo.edit = false; $emit('update')"
      @keyup.enter = "todo.edit=false; $emit('update')">
            <div v-else>
        <label @click = "todo.edit = true;"> {{todo.title}} </label>
      </div>
    </li>
  </ul>

</div>

记者：

 new Vue({
  el: '#app',
  data: {
    todos: [{'title':'one value','edit':false},
                  {'title':'one value','edit':false},
                    {'title':'otro titulo','edit':false}],
    editedTodo: null,
    message: 'Hello Vue.js!'
  },
  methods: {
    editTodo: function(todo) {
      this.editedTodo = todo;
    },
  }

})

原文由 Andrey Moiseev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用一个指令，例如

JS

 new Vue({
  el: '#app',
  data: {
    todos: [
      { title: 'one value', edit: false },
      { title: 'one value', edit: false },
      { title: 'otro titulo', edit: false }
    ],
    editedTodo: null,
    message: 'Hello Vue.js!'
  },
  methods: {
    editTodo: function (todo) {
      this.editedTodo = todo
    }
  },
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
})

HTML

 <div id="app">
    Click the values to edit!
    <ul class="todo-list">
        <li v-for="todo in todos">
            <input
                v-if="todo.edit"
                v-model="todo.title"
                @blur="todo.edit = false; $emit('update')"
                @keyup.enter="todo.edit=false; $emit('update')"
                v-focus
            >
            <div v-else>
                <label @click="todo.edit = true;"> {{todo.title}} </label>
            </div>
        </li>
    </ul>
</div>

您可以在此处找到更多信息 https://v2.vuejs.org/v2/guide/custom-directive.html

原文由 AitorDB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 @AitorDB 的帮助下，我为此编写了一个 Vue 组件，我称之为 Click-to-Edit 。它已准备好使用，所以我将其发布。

它能做什么：

• 支持 v-model
• 单击其他地方并按 Enter 键 时保存更改

点击编辑.vue: (vue 2.x)

 <template>
  <div>
    <input type="text"
           v-if="edit"
           :value="valueLocal"
           @blur.native="valueLocal = $event.target.value; edit = false; $emit('input', valueLocal);"
           @keyup.enter.native="valueLocal = $event.target.value; edit = false; $emit('input', valueLocal);"
           v-focus=""
             />
        <p v-else="" @click="edit = true;">
          {{valueLocal}}
        </p>
    </div>
</template>

<script>
  export default {

  props: ['value'],

  data () {
  return {
      edit: false,
      valueLocal: this.value
    }
  },

  watch: {
    value: function() {
      this.valueLocal = this.value;
    }
  },

  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }

}
</script>

编辑 3.x： [2.x 和 3.x 之间的重大变化]

• 从事件处理程序中删除 .native
• 将 focus 挂钩更改为 mounted 如 自定义指令 3.x 中所述。

原文由 Andrey Moiseev 发布，翻译遵循 CC BY-SA 4.0 许可协议