Vuejs：仅隐藏动态表中的一行

Question

我正在尝试用click event 替换table 上的input 的td。

但是当我点击时，我将所有行转换为输入，我只想转换我点击的那一行

<tr v-for="student in students">
  <td :id="student.id" v-if="isEditing == false">{{student.name}}</td>
  <td v-if="isEditing"><input type="text" class="form-control"></td>
  <td>{{student.lastname}}</td>
  <td>{{student.phone}}</td>
  <td>{{student.address}}</td>
  <td>{{student.city}}</td>
  <td>{{student.country}}</td>
  <td>
    <!-- Boton para activar la edicion, se oculta al darle click / Se muestra al darle click a guardar-->
    <button v-if="!isEditing" class="btn btn-warning btn-circle btn-sm" title="Editar student" @click="editReact(student.id)"><i class="fas fa-pen" title="Editar student"></i></button>
    <!-- Boton para eliminar registro, se oculta al darle click a editiar -->
    <button v-if="!isEditing" type="button" class="btn btn-danger btn-circle btn-sm" title="Eliminar student" @click="drop(student.id, student.nombre, student.apellido)">
                                <i class="fas fa-trash" title="Eliminar student"></i>
                            </button>
    <!--Boton para Guardar la edicion la edicion se oculta al darle click-->
    <button v-if="isEditing" class="btn btn-primary btn-circle btn-sm" title="Guardar" @click="editReact(student.id)" @click="store"><i class="fas fa-save" title="Guardar"></i></button>
    <!-- Boton para cancelar guardard/ Se muestra al activar edicion-->
    <button v-if="isEditing" class="btn btn-default btn-circle btn-sm" @click="editReact(false)"><i class="fas fa-ban" title="Cancelar"></i></button>

  </td>
</tr>

我的数据和方法

  data() {
      return {
          isEditing: false
      };
  }

  methods: {
    store() {
      console.log('saving..');
      this.isEditing = false;
    },
    editReact(action = true){
      this.isEditing = action;
      console.log('editing');
    },

基本上，我只是将isEditing 属性切换为true 或false，并使用我在事件@click 中调用的方法。如果我想渲染或不渲染某些元素（按钮、输入和 td）。但是会影响我所有的行我希望它只影响我一行，整行！

我正在用 axios 填写表格，并在 php 中使用后端咨询数据库。 Vuejs 内容是一个使用 cdn vuejs 的组件。不是 vue-cli 或者 mix/webpack

谢谢！

Answer 1

添加一个名为 currentId 的属性，该属性引用当前已编辑的元素，该元素使用 -1 进行初始化，并在您单击一行时更新：

<button v-if="isEditing" class="btn 
btn-primary btn-circle btn-sm" title="Guardar"
 @click="editReact(student.id, true)" >

 data() {
      return {
          isEditing: false,
         currentId:-1
      };
  }

  methods: {
    store() {
      console.log('saving..');
      this.isEditing = false;
      this.currentId=-1;
    },
    editReact( id,action = true){
      this.isEditing = action;
      this.currentId=id;
    },
  

然后将v-if="isEditing"替换为v-if="isEditing && student.id===currentId"