我从vue.js开始,我正在阅读this question,以帮助我使用v-for
从数据库加载一些帖子。
每个帖子下方都有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;
,但是它没有用。
您可以使用v-model指令在表单输入,文本区域和选择元素上创建双向数据绑定。它会根据输入类型自动选择更新元素的正确方法。尽管有点神奇,但是v模型本质上是用于在用户输入事件上更新数据的语法糖,并且在某些情况下需要特别注意。
来源:https://vuejs.org/v2/guide/forms.html
示例:
<input v-model="description" placeholder="my description">
然后,上述输入值将绑定到数据对象的描述元素,反之亦然-如果其中一个发生更改,则另一个将更新为相同的值:
data:{
description: "default value"
}
因此,当您准备好数据库请求时,可以在数据库方法中更新描述的值:
this.description=db.result.description
并且输入的值也将更新。
同样,如果用户更改输入字段的值,则绑定到数据元素的值也将被更新。因此,当保存回数据库时:
db.update({description:this.description})
((注意:此处的db方法仅供参考。请为您的后端服务替换为相关的DB方法。)
您应该在输入中使用v-model
而不是ref
,它将绑定您的模型与您正在编辑的值,一般来说,我们尽可能避免直接DOM操作,例如:
<input type="text" ref="item.id" v-model="item.title" :disabled="!editingTour"
:class="{view: !editingTour}" />
在调用函数的位置,例如editTour您可以将其传递给item
(如果它在模板中,则可以这样保存更新的版本:
@click="editTour(item)"