Javascript 在html标记外呈现Vue.js@click指令

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

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

是否有一种方法可以触发click事件，而不必将@click直接放在标记中？预期结果将是相同的，但是@click将在vue实例的其他位置定义。

您可以尝试以下操作：

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

---

使用普通事件侦听器？我想了解普通事件绑定如何访问数据模型变量。是否允许在锚属性中使用

ref=

？如果是，请在下面找到我的答案。感谢Ben，我使用了类似的方法创建了一个方法，然后在mounted（）中使用eventListener触发它。我想我的答案与此非常相似，所以没有发布。但是，我会这样做。$refs..$el.addEventList..（），只需

self.modal=true

<代码>Vue.set（…）可以被排除，因为

模式

已经是

数据

中的一个属性。

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