我在 VueJS 中使用 prop value 作为变量时遇到问题。我有一个传输 Prop 的组件:
这是父组件:
<template>
<div class="a">
<UploadAvatarModal
apiurl="upload_avatar"
id="UploadAvatarModal"
/>
</div>
</template>
这是UploadAvatarModal
组件的脚本:
<template>
<div class="a">
...
</div>
</template>
<script>
export default {
props: {
id: String,
apiurl: String
},
methods: {
def: function () {
this.$refs.id.hide()
}
}
}
</script>
在这一行中: this.$refs.id.hide()
如何根据 prop id
调用方法。示例: this.$refs.UploadAvatarModal.hide() 或 this.$refs.UploadAvatarModal2.hide() 被 props 值更改?
最佳答案
您可以访问 Prop :
this.propName
要访问 id 属性,您需要执行以下操作:
this.id
所以你写的行 this.$refs.id.hide()
应该写成:
this.$refs[this.id].hide()
但它可能不会做任何事情,因为 .hide() 是一个 jquery 函数。 在纯 JavaScript 中,您需要执行以下操作:
this.$refs[this.id].style.display = 'none'
也就是说,这样做可能不是一个好主意。
使用 vue,显示/隐藏组件的最佳方法可能是使用 v-if
或 v-show
关于javascript - 在 VueJS 中使用 prop 值作为变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48090825/