樣式：

要實現的功能：（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];
    }
  }
};