Vue.js 使用内联编辑构建表单

假设我们呈现了以下模板，该模板表示一本

书籍

：

<div class="book">
    <h1 class="book__title" ref="title">{{book.title}}</h1>
    <p class="book__description">{{book.description}}</p>
    <button @click="activateEditMode">Edit Book</button>
</div>

我们如何使用JavaScript将v-model绑定附加到新创建的输入元素

---

这是实现这一目标的最佳方法吗？

正如德曼所指出的，您想要的东西可以像这样轻松实现：

<template v-if="!editing">
  <h1>{{ book.title }}</h1>
  <p>{{ book.description }}</p>

  <button @click="editing = false">Done</button>
</template>

<template v-else>
  <input v-model="book.title">
  <input v-model="book.description">

  <button @click="editing = true">Edit</button>
</template>

{{book.title}}
{{book.description}}

多恩
编辑

似乎在模板中添加输入和文本区域要容易得多，但要将它们隐藏起来，然后在编辑模式下交换它们。这样，您就可以像通常那样设置v模型。

<template v-if="!editing">
  <h1>{{ book.title }}</h1>
  <p>{{ book.description }}</p>

  <button @click="editing = false">Done</button>
</template>

<template v-else>
  <input v-model="book.title">
  <input v-model="book.description">

  <button @click="editing = true">Edit</button>
</template>