javascript - 是否可以在对象中单击时创建事件 - Vue JS

Question

new Vue({
  el: "#app",
  data: {
    checking: [
      { text: "Event 1 <a :click='test()' class='click'>click here</a>" },
      { text: "Event 2" },
      { text: "Event 3" },
      { text: "Event 4" }
    ]
  },
  methods: {
    test() {
      console.log("clicked")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.2/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(check, i) in checking" :key="i" v-html="check.test"></li>
  </ul>
</div>

是否可以在对象中创建事件单击？我试过但总是失败，也许我的代码有问题。谢谢你。

这是我的完整代码小提琴

标签： javascripthtmlvue.js

Answer 1

你可以像下面这样尝试，希望能解决你的问题，小提琴

模板：

 <div id="app">
  <ul>
    <li v-for="(check, i) in checking"  :key="i">
     {{check.text}} <a @click='test' class='click'>click here</a>
    </li>
  </ul>
</div>

Vue 实例：

new Vue({
      el: "#app",
      data: {
        checking: [
          { text: "Event 1" },
          { text: "Event 2" },
          { text: "Event 3" },
          { text: "Event 4" }
        ]
      },
      methods: {
        test() {
          console.log("clicked")
        }
      }
    })

屏幕将如下所示：