[英]Vue JS, add event handler for elements created within JS
I am populating a table inside an Axios API call and need to add a delete button to each row.我正在 Axios API 调用中填充一个表,并且需要为每一行添加一个删除按钮。
Im not quite sure how to handle this, in my current experience:根据我目前的经验,我不太确定如何处理这个问题:
formattedVehicles.push([
"<div class='btn btn-danger' v-on:click='deleteVehicle(id)'>Delete</div>"
]);
Ofcourse, this doesn't work.当然,这是行不通的。 How do I go about getting a click handler for the delete button to take a parametre and handle it as a method?
如何获取删除按钮的单击处理程序以获取参数并将其作为方法处理?
In Vue.js you don't have to create div like in jQuery.在 Vue.js 中,您不必像在 jQuery 中那样创建 div。
Here you have an array of vehicles.在这里,您有一系列车辆。 The template will update when the array change.
数组更改时模板将更新。
You just need to manage the array of vehicles like this :您只需要像这样管理车辆阵列:
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>
To understand the code above :要理解上面的代码:
Use v-for
when you have a list to show in html :当您有要在 html 中显示的列表时使用
v-for
:
v-for="(anyNameYouWantForItemOfArray, index) in yourArray"
Inside the div
that contains the v-for
you can access the item of the aray : {{ vehicle.id }}
, {{ vehicle.name }}
or pass data in event handler : @click="deleteVehicle(vehicle.id, index)"
在包含
v-for
的div
中,您可以访问 aray 的项目: {{ vehicle.id }}
、 {{ vehicle.name }}
或在事件处理程序中传递数据: @click="deleteVehicle(vehicle.id, index)"
You must use key
property in v-for
since version 2.2.0+ key :从 2.2.0+ 版本开始,您必须在
v-for
中使用key
属性key :
In 2.2.0+, when using v-for with a component, a key is now required.
在 2.2.0+ 中,当对组件使用 v-for 时,现在需要一个键。
To add event handler you just put v-on:click="method"
or the shortcut @click="method"
要添加事件处理程序,您只需输入
v-on:click="method"
或快捷方式@click="method"
In this case we put <button @click="deleteVehicle(vehicle.id, index)">Delete this vehicle</button>
in the v-for
so when we clicked on the button, we call the deleteVehicle
method with the index of the row.在这种情况下,我们将
<button @click="deleteVehicle(vehicle.id, index)">Delete this vehicle</button>
放在v-for
所以当我们点击按钮时,我们调用deleteVehicle
方法,其索引为行。 In your case you can use id to do an API call with axios.在您的情况下,您可以使用 id 与 axios 进行 API 调用。
We use the v-bind
directive to put javascript code in html attribute v-bind :我们使用
v-bind
指令将 javascript 代码放入 html 属性v-bind :
We are in the v-for
so we have access to index
variable : v-bind:key="index"
or with the shortcut ':' (a colon) : :key="index"
我们在
v-for
所以我们可以访问index
变量: v-bind:key="index"
或使用快捷方式 ':'(冒号) :key="index"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.