如何在 for 循环中获取 id 并插入 function vue.js

Question

I need to be able to grab the id to be able to make an api request. At the moment I've tried the following but whenever I run this the whole page fails to lead. If I remove <a v-on:click="showRecipe({{inf.Id}})">Recipe</a> , it starts working again.

How would you be able to insert the id into the function in the v-for loop?

<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>

function in vue

     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

You could just pass the id as parameter without any interpolation as you do, then add prevent modifier to the click event in order to prevent page redirection:

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

Answer 2

You need to remove the mustache syntax from your function call in the click handler. So instead of <a v-on:click="showRecipe({{inf.Id}})"> , you need <a v-on:click="showRecipe(inf.Id)">