CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-props
thisIsTheFoxe
thisIsTheFoxe

Reputation: 1713

Vue component prop undefined

Sadly I'm not that familiar with Vue and hope someone can help me a bit...

I have this in my index.html:

<xyz :isHidden="hidden">...</xyz>

Now, I have my xyz component:

Vue.component('graph', {
  props: ['isHidden'],
  watch: {
    isHidden() {
     doSomething(this.isHidden);
    }, ...
  }
....
}

Then, I have my Vue app:

let app = new Vue({
  el: '#root',
  methods: {
    action() {
      this.hidden = !this.hidden;
    }, ...
  }, ....
  data: { hidden: false }
})

Now, as I understand the :hidden="isHidden" part should bind the two variable in the different part together, right? So when I change isHidden it should also change hidden and therefore call the watched function which does something. But as it turns out it doesn't.. already when my component is loaded hidden is undefined..

Did I forget something? Or is my mistake probably in the part "..." part of my code? .-.

Upvotes: 0

Views: 2273

Answers (3)

eay
eay

Reputation: 176

you forget use components prop and tag name and component name is should be same

 new Vue({
      el: '#app',
      components: {
        'xyz': xyz,
      }
    })

component name

Vue.component('xyz', {
      props: ['hidden'],
      watch: {
        hidden() {
         doSomething(this.hidden);
        }, ...
      }
    ....
    }

this link should help you: https://v2.vuejs.org/v2/guide/components-registration.html

Upvotes: 0

Anatoly
Anatoly

Reputation: 22758

data section should be a function:

data () { 
  return {
    isHidden: false 
  }
}

Upvotes: 1

thisIsTheFoxe
thisIsTheFoxe

Reputation: 1713

Oh, wait.. now I feel stupid....

Well, anyone else struggling: no big letters (camelCase) in Vue-HTML..

fixed HTML:

<xyz :is-hidden="hidden">...</xyz>

the rest can stay the same..

Upvotes: 1

Related Questions