将数据从 v-for 列表卡传递到相应的模态

Question

我正在构建这个植物数据库（请参阅下面的 link）。当你悬停植物卡片时，你会看到基本统计数据，当你点击 "Mais informações" 时，相应的模式打开，显示更多信息。

http://www.verdeasy.com.br/

问题是：我如何将数据从 v-for 列表卡片传递到模式中显示它们，显然在 v-for 卡片之外 div？

Answer 1

您可以将选定的计划分配给一个变量并在模式中显示它，如下所示：

new Vue({
  data: () => ({
    plants: ['Cebolinha', 'Coentro', 'Louro'],
    plant: null
  })
}).$mount('#app');

.modal {
  position: fixed;
  width: 20%;
  padding: 2rem;
  top: 0;
  left: 0;
  background-color: #FFF
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="p in plants">{{p}} <button href="#" @click="plant = p">details</button></li>
  </ul>
  <div class="modal" v-if="plant">
    {{plant}}
    <button @click="plant = null">Close</button>
  </div>
</div>

将数据从 v-for 列表卡传递到相应的模态

Passing data from v-for list card to corresponding modal

list

vue.js

vue-router

vue-component

vuejs2