Vue在列表渲染中，每一行如何设置自己的计算属性？

Question

问题背景
现在需要渲染生成一个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>

Answer 1

写了个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;
      }
    }
  }
});