我如何在方法对象中使用我的数组/对象数据来引用特定链接 VUEJS

Question

我怎么可能在方法对象中使用"LINK"？

我想你可以看到我想做什么，但如果你不在这里，那就是

使用 VUEJS 中的数组/对象，im 尝试从 Data 方法中的对象获取所有数据，然后将链接对象作为 ref 发送以打开具有已定义链接的新选项卡

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

Answer 1

当您可以使用普通的旧锚标签时，我认为没有任何理由为此使用方法。

例如

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>

Answer 2

你只需要迭代你定义的社交数据，并将链接扔到新标签页

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

Answer 3

使用openLink函数时，除了event参数之外，还需要发送一个参数，否则您将不知道要打开哪个链接。此参数可以是实际的 URL(可能有点多余(或包含链接的数组中对象的索引。

所以第一个选项看起来像这样：

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

第二个是这样的：

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