vuejs 在按钮单击时更新组件值不起作用答案

【问题标题】：vuejs update component value on button click is not workingvuejs 在按钮单击时更新组件值不起作用
【发布时间】：2019-09-12 08:41:51
【问题描述】：

我有一个标题组件。我无法在按钮单击时更新标题组件的值

   <!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: Cannot set property 'islogin' of undefined”错误。

谢谢

【问题讨论】：

你有什么理由使用 ref 吗？否则我建议改用数据绑定...
没有理由使用 href。 my-component 很常见，每个页面都使用它。从每个页面我想更新“islogin”值。

标签： vue.js vuejs2 vue-component

【解决方案1】：

您的组件“我的组件”不在 Vuejs 的范围内。 Vue 位于 id 为“app”的 div 中。所以你不能在这个主div之外添加其他组件

【讨论】：

【解决方案2】：

将组件放入Vuejs #app范围内：

       <div id="app">
          <header>
             <my-component ref="foo"></my-component>
          </header>
          <h1>Component Test</h1>
          <button v-on:click="test">Button</button>
       </div>

【讨论】：