[英]How to grab the id in a for loop and insert into function vue.js
我需要能够获取 id 才能发出 api 请求。 目前我已经尝试了以下方法,但每当我运行它时,整个页面都无法引导。 如果我删除<a v-on:click="showRecipe({{inf.Id}})">Recipe</a>
,它会再次开始工作。
您如何将 id 插入到 v-for 循环中的 function 中?
<tr v-for="inf in info" :key="inf.Id" scope="row">
<td>{{inf.Id}}</td>
<td>{{inf.IngredientCategory}}</td>
<td>{{inf.IngredientName}}</td>
<td>{{inf.Calories}}</td>
<td>
<a v-on:click="showRecipe({{inf.Id}})">Recipe</a>
</td>
</tr>
Vue中的function
new Vue({
el: '#app',
data: {
info: [],
IngredientCategory: '',
IngredientCategory1: '',
Error: null,
},
methods: {
getFormValues: function() {
console.log("test " + this.IngredientCategory);
axios
.get("https://localhost:44331/api/Api/ShowRecipes/" + this.$refs.IngredientCategory.value + "/" + this.$refs.IngredientCategory1.value)
.then(
response => this.info = response.data,
this.Error = null
)
.catch(error => this.Error = error)
},
showRecipe: function (id) {
console.log(id)
}
}
});
您可以只传递id
作为参数而不进行任何插值,然后将prevent
修饰符添加到 click 事件以防止页面重定向:
<a v-on:click.prevent="showRecipe(inf.Id)">Recipe</a>
您需要从单击处理程序中的 function 调用中删除小胡子语法。 因此,您需要<a v-on:click="showRecipe(inf.Id)">
而不是<a v-on:click="showRecipe({{inf.Id}})">
v-on:click="showRecipe({{inf.Id}})">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.