[Vuejs]-Vuejs target all anchor tag onclick

by

2đź‘Ť

âś…

This doesn’t seem like a great idea, BUT you can “watch” changes. In this case to the collection of links and then attach an event handler…

Note: I didn’t test this, but it should get you in the right direction

var vm = new Vue({
      el: '#example',
      data: {
        linkList
      },
      // update the items in linkList when the DOM is ready
      mounted(){
        this.linkList = document.getElementsByTagName('a');
      },
      // watch for changes to linkList and do something
      watch: {
        linkList: function(){
          for( var i=0; i < linkList.length; i ++ ){
          LinkList[i].onclick = linkAction;
          }
        }
      },
      methods: {
        linkAction: function (event) {
          alert(event.target.tagName)
        }
      },
    })

Edit: After reading the comments regarding the goal, you should let vue-router handle transitions between sections. I assume you don’t want to edit each component so look into Dynamic Transitions inside the router.

In this case, you would “watch” for changes to the $route data and do your action there:

watch: {
  '$route' (to, from) {
    // to & from are data in the route object telling you which components are being shown
    const toPath = to.path;
    function(){
      // do some action
      }
    }
  }

This would function regardless of the tag used to trigger the route…

4đź‘Ť

You could attach the click handler on the parent/container element, and detect the target/child element being clicked via the event.target:

new Vue({
  el: '#app',

  methods: {
    clicked(e) {
      const container = e.currentTarget; // FYI
      const anchor = e.target;
      
      console.log(`${anchor.innerHTML} was clicked!`);
    }
  }
})

Vue.config.devtools = false;
Vue.config.productionTip = false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="container" @click="clicked">
    <a href="#">Link #1</a>
    <a href="#">Link #2</a>
    <a href="#">Link #3</a>

    <!-- more anchor elements here -->
  </div>
</div>

0đź‘Ť

Well, you can achieve it by defining the links under data and loop through the v-for directive

First Way

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>

Second way

Create a wrapper component for a and use the same throughout the application.

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>

Hope this helps!

Leave a comment