Question

在官方网站（http://vuejs.org/examples/modal.html）上进行演示

我试图设置它，以便我可以在页面上定义多个模态窗口，就像这样

但由于modals['foo']和modals['bar']未定义，因此Vue会发出警告，表示它会将无效类型发送到道具中。一旦我用两个false初始化脚本，它就可以工作，但这需要我将这些模态名称硬编码到脚本中，这是我不想要的。

在jQuery中，我会通过定义数据目标并简单地确保匹配具有正确ID和modal类的元素来实现此目的，但我不确定如何在Vue中执行类似的操作

Answer 1

如果使用v-ref为模态组件分配参考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

在Vue.js中允许多个模态

1 个答案: