コンポーネント(コンポーネント1)のプロープを別のコンポーネント(コンポーネント2)に渡しています。関連するメソッド(渡された/与えられたプロップ値を持つコンポーネント2にあります)が機能しました。次に、メソッドをコンポーネント 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>