vuejs обновить значение компонента при нажатии кнопки не работает - PullRequest
Новая
       2

vuejs обновить значение компонента при нажатии кнопки не работает

1 голос
/ 23 апреля 2019

У меня есть компонент заголовка.Я не могу обновить значение компонента заголовка при нажатии кнопки 

   <!DOCTYPE html>
     <html> 
      <head>
       <title>Page Title</title>
         </head>
        <body>
         <header>
         <my-component ref="foo"></my-component>
        </header>
           <div id="app">
           <h1>Component Test</h1>
          <button v-on:click="test">Button</button>
          </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var MyComponent = Vue.extend({
    template: '<div><p>Hello</p><div v-if="islogin">User</div></div>',
    data: function () {
      return {
        islogin: false
      };
    }
   });

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  },
  methods: {
    test: function () {         
      this.$refs.foo.islogin = true;
    }
  }
});


 </script>
</body>
</html>

Я хочу обновить islogin до true при нажатии кнопки.Теперь отображается ошибка «TypeError: Невозможно установить свойство islogin из неопределенного».

Спасибо

Ответы [ 2 ]

1 голос
/ 23 апреля 2019

Поместите компонент внутри Vuejs #app scope: 

       <div id="app">
          <header>
             <my-component ref="foo"></my-component>
          </header>
          <h1>Component Test</h1>
          <button v-on:click="test">Button</button>
       </div>
1 голос
/ 23 апреля 2019

Ваш компонент 'my-component' не входит в сферу действия Vuejs.Vue находится в div с идентификатором «app».Таким образом, вы не можете добавлять другие компоненты вне этого основного div

...