将数据从v-for list card传递到相应的模态

Question

我正在建立这个植物数据库（见下面的链接）。当您悬停工厂卡时，您会看到基本统计数据，当您单击“Maisinformações”时，将打开相应的模态，显示更多信息。

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

问题是：如何将v-for list cards中的数据传递到模态中显示它们，显然在v-for cards div之外？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;