インライン編集でフォームを構築

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がどのようにユーザーがコメントをインラインで編集できるようにするかと似ています。

私はプログラム的に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を使用して新しく作成した入力要素に結合する添付う？

これを行うには、これが最善の方法ですか？

Answer 1

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>