Question

我在Axios API调用中填充了一个表，需要为每一行添加一个删除按钮。

根据我目前的经验，我不太清楚如何处理这个问题：

formattedVehicles.push([
    "<div class='btn btn-danger' v-on:click='deleteVehicle(id)'>Delete</div>"
]);

当然，这不起作用。如何获取删除按钮的单击处理程序以获取参数并将其作为方法处理？

Answer 1

在Vue.js中，您不必像在jQuery中那样创建div。

这里有一系列车辆。数组更改时模板将更新。

你只需管理这样的车辆阵列：

new Vue({
  el: "#app",
  data: function() {
    return {
      formattedVehicles: [
         { id: 1, name: 'vehi1' },
         { id: 2, name: 'vehi2' },
         { id: 3, name: 'vehi3' }
      ]
    }
  },
  methods: {
    callingAxiosApi: function() {
//---> Inside your '.then(function (response) {' you do:
//---> this.formattedVehicles = response; If response is the array of vehicles
    },
    addVehicle: function() {
      var rand = Math.floor(Math.random() * (100 - 4)) + 4;
      this.formattedVehicles.push({ id: rand, name: 'vehi' + rand });
    },
    deleteVehicle: function(id, index) {
//---> Here you can use 'id' to do an Axios API call.
      this.formattedVehicles.splice(index, 1);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>
<div id="app">
  
  <button @click="addVehicle">Add vehicle</button>
  
  <div v-for="(vehicle, index) in formattedVehicles" :key="index">
    id: {{ vehicle.id }}
    <br />
    name: {{ vehicle.name }}
    <button @click="deleteVehicle(vehicle.id, index)">Delete this vehicle</button>
  </div>
  
</div>

要理解上面的代码：

如果要在html中显示列表，请使用v-for：

v-for="(anyNameYouWantForItemOfArray, index) in yourArray"

在包含div的{{1}}内，您可以访问aray的项目：v-for，{{ vehicle.id }}或在事件处理程序中传递数据：{{ vehicle.name }}

自版本2.2.0 + key以来，您必须在@click="deleteVehicle(vehicle.id, index)"中使用key属性：

在2.2.0+中，当对组件使用v-for时，现在需要一个键。

要添加事件处理程序，您只需添加v-for或快捷方式v-on:click="method"

在这种情况下，我们将@click="method"放在<button @click="deleteVehicle(vehicle.id, index)">Delete this vehicle</button>中，因此当我们点击按钮时，我们使用行的索引调用v-for方法。在您的情况下，您可以使用id与axios进行API调用。

我们使用deleteVehicle指令将javascript代码放入html属性v-bind中：

我们在v-bind，因此我们可以访问v-for变量： index或使用快捷键'：'（冒号）：v-bind:key="index"

Vue JS，为JS中创建的元素添加事件处理程序

1 个答案: