Vue在列表渲染中，每一行如何设置自己的计算属性？
现在需要渲染生成一个table。而且table的每一行都有一个按钮可以执行相应的操作。
每个按钮都根据状态的不同显示不同的文字。
也就是说相当于button上的text是一个计算属性，根据 state变化而变化的。
问题来了
1： 如何为每一行设置自己的计算属性。
<table>
<thead>
<tr>
<th>ID</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for=" item in items ">
<td>{{item.id}}</td>
<td>{{item.state}}</td>
<td><button>{{item.text}}</button></td>
</tr>
</tbody>
</table>
展开
收起
1
条回答
写回答
写回答
-
IT从业写了个DEMO,在线预览:https://jsfiddle.net/rainwsy/hnnwdkaj/点击预览
自己改下就可以用了HTML:
<table> <thead> <tr> <td>ID</td> <td>状态</td> <td>操作</td> </tr> </thead> <tbody> <tr v-for="item in list"> <td>{{item.id}}</td> <td>{{state[item.state]}}</td> <td> <button v-on:click="changeState($index)">{{control[item.state]}}</button> </td> </tr> </tbody> </table>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; } } } });2019-07-17 19:44:26赞同 展开评论 打赏
问答分类：
相关产品：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
