Question

单击任何锚标记时，我想调用一个方法。无法在所有元素上定义@click或v-on。

<a href="#">link1<a>
<a href="#">link2<a>
<a href="#">link3<a>
<a href="#">link4<a>
<a href="#">link5<a>

在jquery上我可以做到

$('a').click(function(){
   //........
});

如何在vuejs中实现它

注意：我的应用中有10多个组件，并且a标签分布在组件中的每个位置。

Answer 1

好吧，您可以通过定义数据下的链接并通过v-for指令循环来实现它

第一条路

new Vue({
  el: "#app",
  data: {
    links: [
      { link: "first Link" },
      { link: "second Link" },
      { link: "Third Link" },
      { link: "Fourth Link" }
    ]
  },
  methods: {
  	onAnchor: function(e){
    	console.log("Clicked on", e.target.innerHTML);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Todos:</h2>
    <p v-for="link in links">
    <a href="#" @click="onAnchor">{{link.link}}</a>
    </p>
</div>

第二种方式

为a创建一个包装器组件，并在整个应用程序中使用它。

Vue.component('An', {
  template: '#anchor',
  props: ['link']
})

new Vue({
  el: "#app",
  data: function() {
  	return {
    	links: [
      { link: "first Link", text:'first Link' },
      { link: "second Link", text:'second Link' },
      { link: "Third Link", text:'third Link' },
      { link: "Fourth Link", text:'Fourth Link' }
    ]
    }
  },
  methods: {
  	changeText(event) {
    	console.log(event)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Anchor</h2>
  <p v-for="link in links">
    <An :link="link" v-on:on-click="changeText($event)"></An>
  </p>
</div>

<script type="text/x-template" id="anchor">
  <p>
    <a href="#" v-on:click="$emit('on-click', link.text)"> {{link.link}}</a>
  </p>
</script>

希望这会有所帮助！

vuejs将所有锚定标签定位为onclick

1 个答案: