Question

我是Vue的新手，很难在v-if内嵌套v-for。所有内容都呈现，但{{row.id}}（在我的v-if内）显示的是我的数组中的 last 元素，而不是选中的元素。当我将row作为参数传递时，该函数正常工作。我假设我必须在这里做类似的事情，但我在文档中找不到示例或解释。

有没有办法将整个数组传递给我的模态模板，还是我必须以不同的方式构建它？

<tr v-for="row in rows">
   <td><img v-bind:src="row.image" height="180" width="130"></td>
   <td>{{row.title}}</td>
   <td>{{row.platform}}</td>
   <td>
      <button id="edit"><img v-on:click="onClickEdit(row)" @click="showModal = true" src='images/edit.png' height='30' width='30'></button>          
      <modal v-if="showModal" @close="showModal = false">
         <h3 slot="header">{{row.id}}</h3>
      </modal>
   </td>
</tr>

感谢任何帮助：）

Answer 1

问题是每行都有一个模态。并不是模态只显示最后一个元素，当showModal为真时，显示所有模态，最后一个模态位于顶部，其他模态位于其下方。

最快捷的方法是将showModal设置为row.id

@click="showModal = row.id"

对于模态，请row.id

使用v-if

<modal v-if="showModal === row.id" @close="showModal = false">

v-if在v-inside中显示数组中的最后一个元素

1 个答案: