javascript - Vue js——通过方法访问props失败
问题描述
我将一个组件(组件 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>
推荐阅读
- java - 停止程序,直到从 JTextField 获得输入
- angular - Angular Material Dialog:带有数据的解析器?
- python - ValueError:张量原型大于 2GB
- java - SpringBoot 覆盖 AnnotationConfigApplicationContext 抛出未定义的此类 bean
- php - 当您想在数据更新页面上显示单选按钮时如何设置它
- php - 更新单个列
- c# - 将 GridView 控件设置为返回 GridView 的方法
- c# - System.Text.Json 中 Newtonsoft.Json 的 / Json.Net 的 JsonProperty 字段的等价物是什么?
- node.js - Dynamo 和 Mongo 的 NodeJS 包装器
- opencl - 在 OpenCL 1.2 中使用 cl_arm_import_memory 扩展的零复制缓冲区 - arm mali midgard GPU