Multiple buttons with same function call, but alert only showing for the first button

I’ve been messing around with Vue.js and Django and I added a function call to a button. The button is shown multiple times for each different type of food there is, but the alert is only shown when the very first button is clicked. What could be the cause?

Django template:

{%if context%}
{%for fooditem in context%}
<div id = "vue-app2">
<button class = "btn-foodname" v-on:click="changeFoodName()">{{fooditem.food_name}}</button>
<p>{{fooditem.country_of_origin}}</p>
</div>
{%endfor%}
{%else%}
<p>Nothing to see here</p>      
{%endif%}

JS:

var x = new Vue({
    el: '#vue-app2',
    data:{
        new_message: 'Yes, this is a good food!'
    },
    methods:{
        changeFoodName: function(){
            alert(this.new_message);
        }
    }
});

Answer

Figured it out. I had the divinside the for loop so it was creating a new div for each button.

Advertisement

Answer