我将一个组件(组件 1)中的 Proop 传递给另一个组件(组件 2),相关方法(位于组件 2 中,具有传递/给定的 props 值)有效。然后我尝试将该方法放入组件1中,并将方法中的给定值更改为内部动态证明,它停止工作。
肯定是访问方式的问题:
wechat = document.getElementsByClassName(`this.iconsClassName`)[0].childNodes[2];
请帮忙!
<template>
<div :class="iconsClassName">
<div :class="iconClassName" v-for="(icon, index) in icons" :key="index">
<a :href="icon.mediaLink" target="_blank">
<svg style="width:16px;height:16px" viewBox="0 0 24 24">
<path fill="#ffffff" :d="icon.icon" />
</svg>
</a>
</div>
</div>
</template>
<script>
export default {
name: "mediaIcons",
props: {
iconsClassName: String,
iconClassName: String,
event: String
},
methods: {
wechat() {
let wechat = document.getElementsByClassName(this.iconsClassName)[0]
.childNodes[2];
wechat.addEventListener("click", alertWechat);
function alertWechat() {
alert("add me in weChat: eudora_neves");
wechat.childNodes[0].removeAttribute("href");
}
},
mounted: function() {
this.wechat();
}
};
</script>
最佳答案
如果我没理解错的话,您希望 iconClassName
可点击吗?
<div class="iconClassName">
<!-- content -->
</div>
为此,您可以使用 Vue 的 v-on attribute 。 @click="alertWechat"
应该可以解决问题。此外,这会缩短您的代码并使其更具可读性。
<template>
<div :class="iconsClassName">
<div
:class="iconClassName"
v-for="(icon, index) in icons"
:key="index"
@click="alertWechat"
>
<!-- content -->
</div>
</div>
</template>
<script>
export default {
name: "mediaIcons",
props: {
iconsClassName: String,
iconClassName: String,
event: String
},
methods: {
function alertWechat() {
//content
}
}
};
</script>
关于javascript - Vue js -- 通过方法访问 props 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57622955/