Vue.js按ID编辑帖子

问题描述 投票:0回答:2

我从vue.js开始,我正在阅读this question,以帮助我使用v-for从数据库加载一些帖子。

每个帖子下方都有EditDelete按钮。我可以正确删除每个帖子的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;,但是它没有用。

html vue.js
2个回答
1
投票

您可以使用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方法。)


0
投票

您应该在输入中使用v-model而不是ref,它将绑定您的模型与您正在编辑的值,一般来说,我们尽可能避免直接DOM操作,例如:

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

在调用函数的位置,例如editTour您可以将其传递给item(如果它在模板中,则可以这样保存更新的版本:

@click="editTour(item)"
© www.soinside.com 2019 - 2024. All rights reserved.