[Vuejs]-How can i use my array/object data in the method object to then ref to the spceified link VUEJS

by

0👍

✅

I don’t see any reason to use a method for this when you can just use a plain old anchor tag.

For example

new Vue({
    el: ".ui",
    data: {
        socials: [
            {label: "Discord", icon: "fab fa-discord", link: "https://discord.gg/kdnt67j"}, 
            {label: "Twitch", icon: "fab fa-twitch", link: "https://www.twitch.tv/brezedc"}
        ]
    }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<ul class="ui">
  <li v-for="social in socials">
    <a target="_blank" :href="social.link">
      <i :class="social.icon"></i> {{ social.label }}
    </a>
  </li>
</ul>

0👍

you just need to iterate socials data you have defined and throw the link to new tab

export default {
  data() {
    return {
      socials: [
            {label: "Discord", icon: "fab fa-discord", link: "https://discord.gg/kdnt67j"}, 
            {label: "Twitch", icon: "fa fa-twitch", link: "https://www.twitch.tv/brezedc"}
        ]
    };
  },
  watch:{
  },
  computed:{

  },
  methods: {
    openLink() {
      this.socials.map(val => window.open(val.link));
    }
  },
  mounted(){
  }
};

0👍

You need to send a parameter when using the openLink function besides the event parameter because otherwise you won’t know which link to open. This parameter could be the actual URL (which would be a little bit redundant) or the index of the object in the array that contains the link.

So the first option would look something like this:

methods: {
        openLink: function( event, link ) {
            var vm = this;
            window.location = link
        }
    }

and the second one something like this:

methods: {
        openLink: function( event, index ) {
            var vm = this;
            window.location = vm.socials[index].link
        }
    }

Leave a comment