Vue.js edit post by id

Question

I’m starting with Vue.js and am loading some database posts on the screen with v-for Vue.js. I have two functionalities (edit and delete) on two separate buttons under each post.

The delete feature is already working properly by id of the post to be deleted.

The edit feature is already opening one input of the post title to be edited. I’m just not able to save the changes made and when I click on the edit button it opens the input in all posts.

So, I need to open only in the desired post (by id) and I need to save the changes made in this input.

html:

<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">Editar</button>
                        </span>
                        <span>
                            <button @click="save" v-if="editingTour"
                                class="btn border btn-circle tour-list-edit-btn">Salvar</button>
                        </span>
                        <span>
                            <button @click="editingTour = false" v-if="editingTour"
                                class="btn border btn-circle tour-list-delete-btn">Cancelar</button>
                        </span>
                        <span>
                            <button @click="deleteTour(item.id, index)" v-if="!editingTour"
                                class="btn border btn-circle tour-list-delete-btn">Excluir</buton>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- main row --> 

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('Deseja realmente apagar este post?')) {
                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);
        }
    }
});

In the console.log(this.item.title); is returning undefined. In the ref="item.id" I’ve tried to leave ref="title" with this.item.title = this.$refs['item.id'].value; receiving this.item.title = this.$refs['title'].value; but it didn’t help.

What am I missing? Could you help me?

Answer 1

Uses the ID value of the item to be edited in editingTour, and only false for when there is none (or -1 to indicate that it is worthless).

On the button to edit assignments the ID:

<button 
    v-if="editingTour !== item.id"
    @click="editingTour = item.id"                
    class="btn border btn-circle tour-list-edit-btn">Editar</button>

And in the template does :disabled="editingTour !== item.id". So it only activates the input when it has the right item.