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