允許在Vue.js

Question

多模態繼在官方網站上的演示（http://vuejs.org/examples/modal.html）

我試圖設置這讓我可以在頁面上定義多個模態窗口，這樣

http://jsfiddle.net/m2sv4at5/

但由於modals['foo']和modals['bar']沒有定義，Vue公司是投擲警告，它變得無效類型被送進道具。只要我用false爲兩者初始化腳本，它就可以工作，但這需要我將這些模式名稱硬編碼到腳本中，這正是我不想要的。

在jQuery中，我會通過定義一個數據目標並簡單地確保匹配具有正確ID和modal類的元素，但我不確定如何在Vue中執行類似操作。

Answer 1

如果使用v-ref爲模型組件分配參考ID，則該參考ID將可供父級使用，並且您可以通過參考該ID來設置show = true。如果這聽起來很複雜：

<button id="show-show" @click="showModal('foo')">Show Foo</button> 

<modal v-ref:foo> 
    <h3 slot="header">Foo Header</h3> 
</modal> 

new Vue({ 
    el: '#app', 
    methods: { 
    showModal: function(name) { 
     this.$refs[name].show = true; 
    } 
    } 
}) 

http://jsfiddle.net/m2sv4at5/1/

Child Component Refs