Несколько кнопок с одинаковым вызовом функции, но для первой кнопки отображается только предупреждение

Question

Я возился с Vue.js и Django и добавил вызов функции для кнопки. Кнопка отображается несколько раз для каждого вида пищи, но предупреждение отображается только при нажатии самой первой кнопки. В чем может быть причина?

Шаблон Django:

{%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 1

Разобрался. У меня был div внутри цикла for, поэтому он создавал новый div для каждой кнопки.

Answer 2

Проблема в том, что с шаблоном вы сделали несколько блоков с одинаковым идентификатором приложения. Должно быть так:

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