建設有行內編輯形式

比方說，我們已經作出了下列模板，它代表了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

建設有行內編輯形式

回答

相關問題