仅在带有 VueJs 的 for 中的单个 <li> 上的数字上递增

Question

我希望在我的 v-for 中，当我单击 UP 按钮时，链接到该按钮的 li 将其状态增加 +1。

这是我的一些代码：

Vue.component('app', {
    data: function () {
        return {
            messages: '',
            state: 0,
            id: 0,
            todo: [],
            columns: ["todo", "doing", "done"],
        }
    },

    methods: {
        upElement: function (id) {
            this.id
            this.state++;
        },
        removeElement: function (key) {
            this.todo.splice(key, 1);
        },
    },

    template: `
        <ul>
            <li v-if="state === 0" v-for="(item, key) in todo" v-bind:messages="todo.messages + todo.state + todo.id" :key="item.id" v-bind:id="key">
                <span>{{item.messages}}</span></br>
                <button v-on:click="upElement">UeP</button>
                <button v-on:click="removeElement(key)">remove</button>
            </li>
        </ul>=
    `,
})

我想输入一个 id 来定位 li，但它不起作用

Answer 1

您可以将项目对象直接传递给您的 upElement 函数并修改状态属性。

Vue.component('app', {
    data: function () {
        return {
            messages: '',
            state: 0,
            id: 0,
            todo: [],
            columns: ["todo", "doing", "done"],
        }
    },

    methods: {
        upElement: function (item) {
            item.state++;
        },
        removeElement: function (key) {
            this.todo.splice(key, 1);
        },
    },

    template: `
                    <ul>
                        <li v-if="state === 0" v-for="(item, key) in todo" v-bind:messages="todo.messages + todo.state + todo.id" :key="item.id" v-bind:id="key">
                            <span>{{item.messages}}</span></br>
                            <button v-on:click="upElement(item)">UeP</button>
                            <button v-on:click="removeElement(key)">remove</button>
                        </li>
                    </ul>=
    `,
})

仅在带有 VueJs 的 for 中的单个 <li> 上的数字上递增

increment only on a number on a single <li> in a for with VueJs

javascript

methods

vue.js

vue-component

v-for