Question

我们说我们已经呈现了以下代表book的模板：

<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>

我想让我的用户快速编辑这本书。当用户点击Edit Book按钮时，他们应该能够内联编辑。好像.book卡被表单替换了。它类似于Facebook允许其用户内联编辑评论的方式。

我尝试在<h1>方法中以编程方式将<p>和<input>元素替换为相应的<textarea>和activateEditMode()元素：

activateEditMode() {
    let bookTitle = this.$refs.title;
    let bookTitleInput = document.createElement('input');
    // but how do we programatically attach the v-model="book.title" 
    // binding to our newly created input element here?
    bookTitleInput.value = this.book.title;
}

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

这是最好的方法吗？

Answer 1

正如DMan所说，你想要的东西很容易实现：

{{1}}

使用内联编辑构建表单

1 个答案: