Use prop value as a variable in VueJS

Question

I have a problem about using prop value as a variable in VueJS. I have a component which I tranmit prop:

This is parent component:

<template>
  <div class="a">
    <UploadAvatarModal
      apiurl="upload_avatar"
      id="UploadAvatarModal"
    />
  </div>
</template>

This is script of UploadAvatarModal component:

<template>
  <div class="a">
     ...
  </div>
</template>
<script>
export default {
  props: {
    id: String,
    apiurl: String
  },
  methods: {
    def: function () {
      this.$refs.id.hide()
    }
  }
}
</script>

In this line: this.$refs.id.hide() How can I call methods according to prop id. Example: this.$refs.UploadAvatarModal.hide() or this.$refs.UploadAvatarModal2.hide() changed by props value??

You can send custom event from child component to parent component with child id and then in parent you can hide modal with v-if or v-show — CaShiS
– CaShiS, Commented Jan 4, 2018 at 7:56
This is not methods for hiding modal. Do you have any ways to do this? — KitKit
– KitKit, Commented Jan 4, 2018 at 8:02
I'm not sure what you exactly want to do. Please explain it clearly — CaShiS
– CaShiS, Commented Jan 4, 2018 at 8:10
you want to pass an element id to hide it with jquery? if it is, then it is not the way you should do it in vuejs. Like @CaShiS said, you need to pass an event from child to parent to hide a child. My recommendation is not to use jquery with vuejs and use vuejs as it is (unless there is a real necessity for jquery) — Duy Anh
– Duy Anh, Commented Jan 4, 2018 at 8:32
@DuyAnh there is no real necessity for using jquery while using vuejs. — divine
– divine, Commented Jan 4, 2018 at 9:49

Felwin · Accepted Answer · 2018-01-12 17:44:10Z

5

You can access props doing :

this.propName

To access id prop you need to do :

this.id

So the line you wrote this.$refs.id.hide() should be written :

this.$refs[this.id].hide()

But it will probably do nothing as .hide() is a jquery function. In plain javascript you would need to do :

this.$refs[this.id].style.display = 'none'

That said, it's might not be a good idea to do so. Using vue, the best way to show/hide a component is probably to use v-if or v-show

edited Jan 12, 2018 at 17:44

answered Jan 12, 2018 at 15:23

Felwin

2008 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use prop value as a variable in VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related