v-forリストカードから対応するモーダルにデータを渡す

Question

私はこの植物データベースを構築しています（下のリンクを参照）。プラントカードにカーソルを合わせると、基本的な統計情報が表示され、「Maisinformações」をクリックすると、対応するモーダルが開き、詳細情報が表示されます。

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

質問は：どのように私は明らかにV-用カードのdivの外に、モーダルでそれらを示すには、V-用リストカードからデータを渡すことができますか？

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>