在HTML标记之外渲染Vue.js @click指令

Question

我有这样设置的链接：

<a href="#" @click="modal=true">Open modal</a>

这是数据：

export default {
    data () {
        return {
            modal: false
        }
    }
}

是否有一种解决方法来触发click事件，而无需实际将@click直接放置在代码中？ 预期结果将是相同的，但是@click将在vue实例中的其他位置定义。

Answer 1

您可以尝试以下方法：

export default {
  data () {
    return {
      modal: false
    }
  },
  mounted () {
    var self = this;
    this.$el.querySelector('a').addEventListener('click', function () {
        Vue.set(self, 'modal', true);
    });
  }
}