Vue.js 按 id 编辑帖子

Question

我从 vue.js 开始，我正在阅读 this question 以帮助我使用 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://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})

（注意：此处的 db 方法仅用于示例目的。请替换为后端服务的相关 DB 方法。）