输入字段未更新数组中的“地址”

Question

我正在创建一个循环遍历数组的表，并将表中的数组显示为列表。我将地址显示为输入字段值:value="location.address"

输入字段设置为禁用，当我单击编辑按钮时，我将禁用属性更新为 false，以便可以编辑输入字段。我添加了一个名为 editedAddress: null 的新属性并将其设置为 null，该属性将更新为当前地址属性 this.editedAddress = this.locations[index].address。

我想要的是当我点击编辑按钮时，我想要更新地址。我为更新按钮添加了以下代码，但它不起作用。

btnUpdate(index){
       this.locations[index].address = this.editedAddress;
        this.locations[index].disabled = !this.locations[index].disabled
    }

这是完整的代码

<template>
  <div>
    <table>
      <tr>
        <th>#</th>
        <th>Locations</th>
        <th>Actions</th>
      </tr>
      <tr v-for="(location, index) in locations" :key="index">
        <td>{{index + 1}}</td>
        <td>
          <input type="text" :value="location.address" :disabled="location.disabled">
        </td>
        <td>
          <div class="action-btns">
            <button @click="btnEdit(index)">Edit</button>
            <button @click="btnUpdate(index)">Update</button>
            <button @click="btnDelete(index)">Delete</button>
          </div>
        </td>
      </tr>
    </table>
    <input type="text" v-model="address"> 
    <button @click="addBtn">Add</button>
  </div>
</template>

<script>

export default {
  data(){
    return{
      locations:[
        {
          address:'Mall of lahore',
          disabled: true
        },
        {
          address: 'The Post Office',
          disabled: true
        },
        {
          address: 'Mall of Dubai',
          disabled: true
        }
      ],
      address: '',
      editedAddress: null
    }
  },
  methods:{
    btnEdit(index){
     this.locations[index].disabled = !this.locations[index].disabled
     this.editedAddress = this.locations[index].address
    },
    btnUpdate(index){
       this.locations[index].address = this.editedAddress;
        this.locations[index].disabled = !this.locations[index].disabled
    },
    btnDelete(index){
      this.locations.splice(index , 1)
    },
    addBtn(){
      let newAddress = {
        address: this.address,
        disabled: true
      }
      this.locations.push(newAddress)
      this.address = '';
    }
  }
}
</script>

请让我知道我做错了什么或者是否有更好的方法来解决它

Answer 1

由于您没有解释“我已经为更新按钮添加了以下代码但它不起作用”的确切含义，我将假设您的 UI 没有被更新。

这是 Vue 反应系统 https://vuejs.org/v2/guide/reactivity.html#For-Arrays 中反应性的警告

可能 Vue 无法确定数组 locations 中的项目发生了变化。

要让 Vue 了解有更改，您可以使用 Vue.set：

btnUpdate(index){
  Vue.set(this.locations[index], 'address', this.editedAddress);
  // do the same for the other line
},

在此之后 Vue 应该能够选择有更改并为您重新渲染 UI。

另一种方法是替换整个数组（但在大多数情况下这有点矫枉过正）

btnUpdate(index){
  const locations = [...this.locations];
  
  locations[index].address = this.editedAddress;

  this.locations = locations;
},

Answer 2

您的输入字段绑定到location.address。 所以，你根本没有编辑你的editedAddress。

您可以在输入字段中添加@change="editedAddress = $event.target.value" 以更改editedAddress

 <input type="text" :value="location.address" :disabled="location.disabled" @change="editedAddress = $event.target.value" >

提示：使用Vue Dev Tools 或 JSON.stringify 来检查你的 vue 应用中的数据

JSON.stringify(editedAddress): {{JSON.stringify(editedAddress)}}

这是带有修复程序的link playground