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

Posted

技术标签:

【中文标题】vuejs 在按钮单击时更新组件值不起作用【英文标题】：vuejs update component value on button click is not working 【发布时间】：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”值。 【参考方案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>

【讨论】：

以上是关于vuejs 在按钮单击时更新组件值不起作用的主要内容，如果未能解决你的问题，请参考以下文章

VueJS从Vuex返回值不起作用

VueJS 插槽：为啥通过父插槽传入的子方法不起作用？

Vue JS：使用基于提供的索引的 splice() 方法删除数组中动态渲染的组件，不起作用

使用Polymer 2.0的简单web组件：从下拉列表更新值不起作用

更新反应材料 ui 滑块的状态/值不起作用

在 VUEJS 2 中没有括号的测试不起作用