javascript - 在 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 分配给模态组件，它将对父级可用，并且您可以通过引用来设置 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