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

Question

我正在构建此工厂数据库(请参见下面的链接(。当您悬停植物卡时，您会看到基本的统计数据，当您单击" MaisInformações"时，将打开相应的模态，显示更多信息。

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

问题是：如何将数据从v-for列表卡传递给模式显示，显然是在Vor卡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>