[英]Vue js -- accessing props through methods failed
I am passing a proop in a component (component 1) to another one (component 2), the method related (which is in component 2 with passed/given props value) worked.我将一个组件(组件 1)中的一个 prop 传递给另一个组件(组件 2),相关的方法(在组件 2 中具有传递/给定的 props 值)起作用。 Then i tried to put the method inside the component 1 and change the given value in the method to a internal dynamic proof, it stopped working.
然后我尝试将方法放在组件 1 中并将方法中的给定值更改为内部动态证明,它停止工作。
It's for sure the problem of the way of accessing:肯定是访问方式的问题:
wechat = document.getElementsByClassName(`this.iconsClassName`)[0].childNodes[2];
please help!请帮忙!
<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>
If I understood right, you want the iconClassName
to be clickable?如果我理解正确,您希望
iconClassName
是可点击的?
<div class="iconClassName">
<!-- content -->
</div>
For this you can use Vue's v-on attribute .为此,您可以使用 Vue 的v-on 属性。
@click="alertWechat"
should do the trick. @click="alertWechat"
应该可以解决问题。 Also, this would shorten your code and make it a bit more readable.此外,这会缩短您的代码并使其更具可读性。
<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.