Solution 1 :

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>

Solution 2 :

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(){
  }
};

Solution 3 :

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
        }
    }

Problem :

How can i possibly use the “LINK” in the methods object?

I think you can see what im trying to do, but if you don’t here it is

With a array/object in VUEJS im trying to get all the data from the object in the Data method to then send the link object as a ref to open a new tab with the already defined link

const Main = new Vue({
    el: ".ui",
    data: {
        socials: [
            {label: "Discord", icon: "fab fa-discord", link: "https://discord.gg/kdnt67j"}, 
            {label: "Twitch", icon: "fa fa-twitch", link: "https://www.twitch.tv/brezedc"}
        ]
    },
    methods: {
        openLink: function( event ) {
            var vm = this;
            window.location = vm.socials.link
        }
    }
})

Comments

Comment posted by Skeexs

Tried both of those, didn’t work. And do i need to use a .VUE and not a .js when using this type of code?

Comment posted by vuejs.org/v2/guide/index.html

I recommend you reading this page

By