vue 获得一行_Vue在列表渲染中，每一行如何设置自己的计算属性？ -问答-阿里云开发者社区-阿里云...

HTML:

ID状态操作

{{item.id}}{{state[item.state]}}

{{control[item.state]}}

JavaScript:

vm = new Vue({

el: 'body',

data: {

state: ["新建", "进行中", "已完成", "已取消"],

control: ["开始", "取消", "删除", "删除"],

list: [

{ "id":0, "state":0 }, { "id":1, "state":0 }, { "id":2, "state":3 }, { "id":3, "state":2 },

{ "id":4, "state":2 }, { "id":5, "state":3 }, { "id":6, "state":3 }, { "id":7, "state":3 },

{ "id":8, "state":2 }, { "id":9, "state":2 }, { "id":10, "state":1 }, { "id":11, "state":2 },

{ "id":12, "state":2 }, { "id":13, "state":2 }, { "id":14, "state":0 }, { "id":15, "state":2 },

{ "id":16, "state":1 }, { "id":17, "state":3 }, { "id":18, "state":0 }, { "id":19, "state":1 },

{ "id":20, "state":1 }, { "id":21, "state":2 }, { "id":22, "state":0 }, { "id":23, "state":0 },

{ "id":24, "state":3 }, { "id":25, "state":3 }, { "id":26, "state":3 }, { "id":27, "state":2 },

{ "id":28, "state":1 }, { "id":29, "state":1 }, { "id":30, "state":0 }, { "id":31, "state":1 },

{ "id":32, "state":3 }, { "id":33, "state":0 }, { "id":34, "state":0 }, { "id":35, "state":0 },

{ "id":36, "state":2 }, { "id":37, "state":2 }, { "id":38, "state":3 }, { "id":39, "state":3 },

{ "id":40, "state":3 }, { "id":41, "state":1 }, { "id":42, "state":3 }, { "id":43, "state":3 },

{ "id":44, "state":2 }, { "id":45, "state":3 }, { "id":46, "state":3 }, { "id":47, "state":1 },

{ "id":48, "state":1 }, { "id":49, "state":0 }

]

},

methods: {

changeState: function($index) {

if (Number(this.list[$index].state < 3)) {

this.list[$index].state += 1;

}

}

}

});