Question

我一直在处理Vue.js和Django，并向按钮添加了函数调用。对于每种不同类型的食物，按钮都会多次显示，但是仅在单击第一个按钮时才会显示警报。可能是什么原因？

Django模板：

contract_id

JS：

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

Answer 1

弄清楚了。我在for循环中使用了div，因此它正在为每个按钮创建一个新的div。

Answer 2

问题在于，使用模板可以用相同的应用程序ID制作多个块。应该是这样的：

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

具有相同功能调用的多个按钮，但仅针对第一个按钮显示警报

2 个答案: