Vue数据没有得到更新

Question

我在我的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的值时，它具有正确的数据。这就是为什么我把它放在它下面的原因。任何人都可以帮我找到为什么反应性在这里不起作用吗？

Answer 1

根据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>