CODEWITHSUNDEEP
javascriptvue.jsvuejs2
KitKit
KitKit

Reputation: 9583

Use prop value as a variable in VueJS

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??

Upvotes: 1

Views: 3630

Answers (1)

Felwin
Felwin

Reputation: 200

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

Upvotes: 5

Related Questions