遍历出来的数据实现对应的修改

样式：

             

要实现的功能：（1）：点击修改可以使对应的输入框变为可以编辑，同时把 ‘修改’ => ‘确定’

代码 ： vue-html

<div class="home">
    <ul>
      <li v-for="item in list">
        <el-input class="input" placeholder="请输入内容" v-model="item.name" :disabled="state[item.id]"></el-input>
        <span @click="updateInput(item.id)">{{state[item.id] ? '修改' : '确定'}}</span>
      </li>
    </ul>
  </div>

export default {
  name: "home",
  data() {
    return {
      state: {},
      list: []
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      this.list = [
        {id: "0001",name: "1"},
        {id: "0002",name: "2"},
        {id: "0003",name: "3"},
        {id: "0004",name: "4"},
        {id: "0005",name: "5"}
      ];
      this.list.forEach(item => {
        this.$set(this.state, item.id, true);//父元素  要改变的元素  改变成为的值
      });
    },
    updateInput(id) {
      // 修改输入框
      this.state[id] = !this.state[id];
    }
  }
};