[英]Vue js -- accessing props through methods failed
我将一个组件(组件 1)中的一个 prop 传递给另一个组件(组件 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 属性。 @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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.