Vue JS - доступ к реквизитам через методы не удалось

Question

Я передаю proop в компоненте (компонент 1) другому (компонент 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>

Answer 1

Если я правильно понял, вы хотите iconClassName быть кликабельным?

<div class="iconClassName">
<!-- content -->
</div>

Для этого вы можете использовать v-on атрибут Vue. @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>