Vue数据没有得到更新
问题描述:
我在我的vue应用程序安装的挂钩上有以下内容。Vue数据没有得到更新
let vm = this;
$("button[name='daterange']")
.daterangepicker({
ranges: vm.presets,
opens: 'left',
format: 'YYYY-MM-DD',
startDate: startDateValue,
endDate: endDateValue
}, function(start, end, label) { // cb for when dates are picked
let filter = vm.$options.filters.date;
vm.range = {
start: start,
end: end
};
console.log(vm.range);
vm.$root.$emit('date.change', vm.range);
});
和数据如下:
data: function() {
return {
currentRange: 'Last 7 Days',
presets: {},
range: {},
}
},
出于某种原因,是没有得到执行的range
观察者,我无法看到VUE-DEV-工具更新的价值,以及。但是当我在控制台登录range
的值时,它具有正确的数据。这就是为什么我把它放在它下面的原因。任何人都可以帮我找到为什么反应性在这里不起作用吗?
答
根据the usage instructions,您在locale
对象内设置了format
。这对我有用。
new Vue({
el: '#app',
data: {
currentRange: 'Last 7 Days',
presets: {},
range: {}
},
mounted() {
let vm = this;
$("[name='daterange']")
.daterangepicker({
ranges: vm.presets,
opens: 'left',
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2017-01-01',
endDate: '2017-02-01'
}, function(start, end, label) { // cb for when dates are picked
vm.range = {
start: start,
end: end
};
});
}
});
<!-- Include Required Prerequisites -->
<script src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<button name='daterange'>Pick</button> {{range}}
</div>
我用这一个:http://www.daterangepicker.com/ – user1012181
更新的答案。 –
这仍然没有被动。 – user1012181