建设有行内编辑形式

比方说，我们已经作出了下列模板，它代表了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如何允许其用户在线编辑评论类似。

我试图在activateEditMode()方法编程与相应<input>和<textarea>元素替换<h1>和<p>元素：

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

如何将我们重视我们的V模型结合我们的使用JavaScript新创建的输入元素？

这是最好的方法吗？

来源

2017-08-31 puoygae

看来，这将是一个更容易输入和文本区域添加到模板，但让他们隐藏，然后交换他们在你处于编辑模式时。这样，您可以像平常一样设置v模型。 – DMan

至于合作举办一年一度的注意，你想要什么可以像这样可以轻松实现：

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

来源

2017-08-31 23:19:22 Marty

建设有行内编辑形式

回答

相关问题