vuejs update component value on button click is not working

Question

I have a header component. i cant able to update value of header component on button click

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

i want to update the islogin to true on button click. Now it shows "TypeError: Cannot set property 'islogin' of undefined" error.

Thanks

Is there any reason why you use ref? Otherwise I would suggest to use data binding instead... — Simon Thiel
– Simon Thiel, Commented Apr 23, 2019 at 9:43
no reason for using href. my-component is common and its used every pages. From each page i want to update the "islogin" value. — Basil Joy
– Basil Joy, Commented Apr 23, 2019 at 11:13

P-A Bouly · Accepted Answer · 2019-04-23 08:08:43Z

1

Your component 'my-component' is not in the scope of Vuejs. Vue is in the div with the id 'app'. So you can't add others components outside this main div

answered Apr 23, 2019 at 8:08

P-A Bouly

2432 silver badges10 bronze badges

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

Comments

Ahmad Mobaraki · Accepted Answer · 2019-04-23 08:11:43Z

1

Put the component inside 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>

answered Apr 23, 2019 at 8:11

Ahmad Mobaraki

8,2485 gold badges54 silver badges75 bronze badges

Collectives™ on Stack Overflow

vuejs update component value on button click is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related