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 在按钮单击时更新组件值不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Vue JS:使用基于提供的索引的 splice() 方法删除数组中动态渲染的组件,不起作用