Vue.js按id编辑帖子

Question

我从vue.js开始，我读这个问题是为了帮助我用v-for从DB加载一些帖子。

每个帖子下面都有Edit和Delete按钮。我可以根据每个帖子的ID正确删除它。我也可以打开input来正确编辑帖子标题。

但当我点击保存按钮时，我无法保存input更改。它返回到初始文本。

当我点击编辑时，它会打开所有的inputs标题。

有没有办法打开特定的帖子标题并在保存后保留更改？

<div id="app" class="row mb-50">
<div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
<div class="tour-list">
<div class="tour-list-title">
<p>
<input type="text" ref="item.id" :value="item.title" :disabled="!editingTour"
:class="{view: !editingTour}" />
</p>
</div>
<div class="tour-list-description">
<p>
{{ item.description }}
</p>
</div>
<div class="tour-list-options">
<div class="row">
<div class="col-md-6">
<span>
<button @click="editingTour = !editingTour" v-if="!editingTour"
class="btn border btn-circle tour-list-edit-btn">Edit</button>
</span>
<span>
<button @click="save" v-if="editingTour"
class="btn border btn-circle tour-list-edit-btn">Save</button>
</span>
<span>
<button @click="editingTour = false" v-if="editingTour"
class="btn border btn-circle tour-list-delete-btn">Cancel</button>
</span>
<span>
<button @click="deleteTour(item.id, index)" v-if="!editingTour"
class="btn border btn-circle tour-list-delete-btn">Delete</buton>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

vue.js:

let app = new Vue({
el: '#app',
data: {
editingTour: false,
tours: null,
errored: false,
edited: false,
deleted: false,
item: {
title: null,
description: null
}
},
created: function () {
this.searchTour()
},
methods: {
searchTour: function () {
axios.post('getPosts.php', { "token": param }).then((response) => {
this.tours = response.data;
}).catch((error) => {
this.errored = error;
});
},
editTour: function (id) {
axios.post('editPosts.php', { "token": token, "tourID": id }).then((response) => {
this.edited = response.data;
}).catch((error) => {
this.errored = error;
});
},
deleteTour: function (id) {
if (confirm('Are You sure?')) {
const index = this.tours.findIndex(item => item.id === id);
if (~index) {
axios.post('deletePosts.php', { "token": token, "tourID": id }).then((response) => {
this.deleted = response;
this.tours.splice(index, 1);
}).catch((error) => {
this.errored = error;
});
}
}
},
save: function () {
this.item.title = this.$refs['item.id'].value;
this.editingTour = !this.editingTour;
console.log(this.item.title);
}
}
});

在console.log(this.item.title);中返回undefined。

我已经将ref="item.id"更改为ref="title"，将this.item.title = this.$refs['item.id'].value;更改为this.item.title = this.$refs['title'].value;，但它不起作用。

Answer 1

您应该在输入中使用v-model而不是ref，它会将您的模型与您正在编辑的值绑定，通常在vue中，我们尽可能避免直接操作DOM，如下所示：

<input type="text" ref="item.id" v-model="item.title" :disabled="!editingTour"
:class="{view: !editingTour}" />

在调用函数(例如editTour(时，您可以将item传递给它(如果它在模板中，则保存更新版本，如：

@click="editTour(item)"

Answer 2

您可以使用v-model指令在表单输入、文本区域和选择元素上创建双向数据绑定。它会根据输入类型自动选择更新元素的正确方式。尽管有点神奇，但v-model本质上是用于更新用户输入事件数据的语法糖，此外还特别注意一些边缘情况。

来源：https://v2.vuejs.org/v2/guide/forms.html

示例：

<input v-model="description" placeholder="my description">

然后，上面的输入值将绑定到数据对象的描述元素，反之亦然——如果其中一个值发生变化，另一个值将更新为相同的值：

data:{
description: "default value"
}

因此，当DB请求准备就绪时，您可以在DB方法中更新描述的值：

this.description=db.result.description

并且输入的值也将更新。

同样，如果用户更改输入字段的值，则绑定到数据元素的值也将更新。因此，当保存回DB:时

db.update({description:this.description})

(注意：这里的数据库方法仅用于示例。替换为后端服务的相关数据库方法。(