在 html 标记之外渲染 Vue.js @click 指令答案

【问题标题】：Render Vue.js @click directive outside of html tag在 html 标记之外渲染 Vue.js @click 指令
【发布时间】：2017-12-08 18:38:51
【问题描述】：

我有一个这样设置的链接：

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

这是数据：

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

是否有一种解决方法来触发点击事件，而实际上不必将@click 直接放在标签中？预期的结果将是相同的，但是 @click 将在 vue 实例的其他地方定义。

【问题讨论】：

使用普通事件监听器？
我有兴趣了解普通事件绑定如何访问数据模型变量。
你可以在锚的属性中使用ref=吗？如果是，请在下面找到我的答案。

标签： javascript jquery html vue.js vuejs2

【解决方案1】：

你可以试试这个：

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

【讨论】：

感谢 Ben，我使用了类似的方法，创建了一个方法，然后在 mount() 中使用 eventListener 触发它
我想我的答案与此非常相似，所以没有发布。但是，我会做this.$refs.<ref-name>.$el.addEventList..() 和self.modal = true。 Vue.set(...) 可以被排除，因为modal 已经是data 中的一个属性。