Vue Пропорция компонента не определена - PullRequest
Новая
       22

Vue Пропорция компонента не определена

0 голосов
/ 20 апреля 2020

К сожалению, я не настолько знаком с Vue и надеюсь, что кто-нибудь может мне помочь ...

У меня есть это в моем индексе. html: 

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

Теперь у меня есть компонент xyz: 

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

Затем у меня есть приложение Vue: 

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

Теперь, насколько я понимаю, часть :hidden="isHidden" должна связывать две переменные в разных частях вместе, верно? Поэтому, когда я изменяю isHidden, он также должен менять hidden и, следовательно, вызывать наблюдаемую функцию, которая что-то делает. Но, как выясняется, это не так ... уже, когда мой компонент загружен hidden не определено ..

Я что-то забыл? Или моя ошибка, вероятно, в части "..." части моего кода? .-.

Ответы [ 3 ]

1 голос
/ 20 апреля 2020

данные секция должна быть функцией: 

data () { 
  return {
    isHidden: false 
  }
}
0 голосов
/ 20 апреля 2020

Ой, подождите .. теперь я чувствую себя глупо ....

Ну, кто-то еще борется: нет больших букв (camelCase) в Vue - HTML ..

исправлено HTML: 

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

остальные могут остаться прежними ..

0 голосов
/ 20 апреля 2020

вы забыли использовать реквизиты компонентов и имя тега, а имя компонента должно быть одинаковым 

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

имя компонента 

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

эта ссылка должна помочь вам: https://vuejs.org/v2/guide/components-registration.html

...