如何在 for 循環中獲取 id 並插入 function vue.js

Question

我需要能夠獲取 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)
                }
            }
        });

Answer 1

您可以只傳遞id作為參數而不進行任何插值，然后將prevent修飾符添加到 click 事件以防止頁面重定向：

<a v-on:click.prevent="showRecipe(inf.Id)">Recipe</a>

Answer 2

您需要從單擊處理程序中的 function 調用中刪除小胡子語法。 因此，您需要<a v-on:click="showRecipe(inf.Id)">而不是<a v-on:click="showRecipe({{inf.Id}})"> v-on:click="showRecipe({{inf.Id}})">