仅在使用 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', {&nbsp; &nbsp; data: function () {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; messages: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; todo: [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns: ["todo", "doing", "done"],&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; upElement: function (item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.state++;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; removeElement: function (key) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.todo.splice(key, 1);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },&nbsp; &nbsp; template: `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{{item.messages}}</span></br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button v-on:click="upElement(item)">UeP</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button v-on:click="removeElement(key)">remove</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>=&nbsp; &nbsp; `,})