Vue.js v-if 不响应变量变化
[英] Vue.js v-if not reacting to variable change
本文介绍了Vue.js v-if 不响应变量变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 vue.js，但在正确使用 v-if 方面遇到了一些困难.
我正在尝试在模板中渲染条件模板.在 created 方法中，变量 isloaded 设置为 true，这应该会导致模板重新渲染并让加载数据"消息消失.
但是，日志表明，2 秒的延迟有效，因此达到了回调，但看起来我没有正确更新数据变量.
我已经尝试了几件事，现在我将true/false"更改为字符串，以便更接近官方主页上给出的示例，但仍然没有成功.我希望你能帮助我，因此在此先感谢.
请在下面找到有趣的代码片段:
var step1 = Vue.component('step1', {模板:'#step1'，数据:函数(){返回 {帐户:[]，加载:'假'}},创建:函数(){console.log("创建");设置超时(函数(){console.log("超时");this.isloaded = '真';this.accounts = [{编号:1234，名称:德国"}];}, 2000);},方法: {加载:函数(){console.log(this.isloaded === 'true');返回 this.isloaded === 'true';}}})新的 Vue({el: '#main'});
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"><;/脚本><模板 id="step1"><div class="step1"><h1>欢迎选择您的帐号:</h1><模板 v-if="isloaded === 'false'"><p>加载数据</p></模板><模板v-else><选择><template v-for="account in accounts"><option :value="account.id">{{ account.name }}</option></模板></选择></模板>
</模板><div id="main"><step1></step1>
解决方案
来自 Vue.js - Reactivity in Depth 文档:
<块引用>
例如，当你设置 vm.someData = 'new value' 时，组件不会立即重新渲染.它将在下一个滴答"中更新，当队列被刷新时.
随着数据在创建的生命周期钩子中被改变，我们需要使用 $nextTick 更多信息可以在上面的页面中找到.
var step1 = Vue.component('step1', {模板:'#step1'，数据:函数(){返回 {帐户:[]，加载:假}},创建:函数(){console.log("创建");var self = this;设置超时(函数(){console.log("超时");self.$nextTick(function() {self.isloaded = true;self.accounts = [{编号:1234，名称:德国"}];})}, 2000);}})新的 Vue({el: '#main'});
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"><;/脚本><模板 id="step1"><div class="step1"><h1>欢迎选择您的帐号:</h1><模板 v-if="isloaded===false"><p>加载数据</p></模板><模板v-else><选择><template v-for="account in accounts"><option :value="account.id">{{ account.name }}</option></模板></选择></模板>
</模板><div id="main"><step1></step1>
但是，如果您将加载数据的代码放在一个方法中，并从 created 钩子调用该方法.它无需 $nextTick 即可工作.
方法:{加载数据:函数(){var self = this;设置超时(函数(){console.log("超时");self.isloaded = true;self.accounts = [{编号:1234，名称:德国"}];}, 2000);}},创建:函数(){console.log("创建");this.loadData();}
i'm playing around with vue.js and have some struggle in using v-if correctly.
i'm trying to have a conditional template rendering inside a template. in the created method, the variable isloaded is set to true, which should lead the template to be rerendered and let the "Loading Data" message disappear.
However, the log indicated, the delay of 2s works, so the callback is reached, but it looks like i'm not updating the data variables correctly.
I tried already several things and now i changed "true/false" to be strings in order to be closer to the exampled given on the official homepage, but still no success. i hope you can help me and therefor thanks a lot in advance.
please find below the interesting codesnippets:
var step1 = Vue.component('step1', {
template: '#step1',
data: function() {
return {
accounts: [],
isloaded: 'false'
}
},
created: function() {
console.log("created");
setTimeout(function() {
console.log("times over");
this.isloaded = 'true';
this.accounts = [{
id: 1234,
name: "germany"
}];
}, 2000);
},
methods: {
loaded: function() {
console.log(this.isloaded === 'true');
return this.isloaded === 'true';
}
}
})
new Vue({
el: '#main'
});
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<template id="step1">
<div class="step1">
<h1>Welcome please choose your account:</h1>
<template v-if="isloaded === 'false'">
<p>Loading Data</p>
</template>
<template v-else>
<select>
<template v-for="account in accounts">
<option :value="account.id">{{ account.name }}</option>
</template>
</select>
</template>
</div>
</template>
<div id="main">
<step1></step1>
</div>
解决方案
From the Vue.js - Reactivity in Depth docs:
For example, when you set vm.someData = 'new value', the component
will not re-render immediately. It will update in the next "tick",
when the queue is flushed.
With the data being mutated in the created lifecycle hook, we need to use $nextTick More info on that can be found in the above page.
var step1 = Vue.component('step1', {
template: '#step1',
data: function() {
return {
accounts: [],
isloaded: false
}
},
created: function() {
console.log("created");
var self = this;
setTimeout(function() {
console.log("times over");
self.$nextTick(function() {
self.isloaded = true;
self.accounts = [{
id: 1234,
name: "germany"
}];
})
}, 2000);
}
})
new Vue({
el: '#main'
});
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<template id="step1">
<div class="step1">
<h1>Welcome please choose your account:</h1>
<template v-if="isloaded===false">
<p>Loading Data</p>
</template>
<template v-else>
<select>
<template v-for="account in accounts">
<option :value="account.id">{{ account.name }}</option>
</template>
</select>
</template>
</div>
</template>
<div id="main">
<step1></step1>
</div>
However, if you place the code that is loading the data inside a method, and call that method from the created hook. It works without $nextTick.
methods: {
loadData: function() {
var self = this;
setTimeout(function() {
console.log("times over");
self.isloaded = true;
self.accounts = [{
id: 1234,
name: "germany"
}];
}, 2000);
}
},
created: function() {
console.log("created");
this.loadData();
}
这篇关于Vue.js v-if 不响应变量变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
