將數據從v-for列表傳遞到相應的模式

Question

我正在構建這個工廠數據庫（請參閱下面的鏈接）。當您懸停工廠卡時，您會看到基本統計數據，當您點擊「Maisinformações」時，相應的模式將打開，顯示更多信息。

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

的問題是：如何從V-的列表卡上的數據傳遞到顯示的情態動詞他們，顯然是V型的卡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>