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>