仅在使用 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

您可以将 item 对象直接传递给您的upElement函数并修改 state 属性。

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>=

    `,

})