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-tool 中的更新值。但是当我控制台记录range 的值时，它有正确的数据。这就是为什么我把发射放在它下面的原因。谁能帮我找出为什么反应在这里不起作用？

Answer 1

根据the usage instructions，您将format 设置在locale 对象中。这对我有用。

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>