Question

我有 vm。$ watch 方法的问题，它可以观看单个变量。

我无法观看数组元素。

在下面的例子中，我无法观察下面两个选择框的变化：

＆＃13;

\\

＆＃13;

Vue.directive('select', {
  twoWay: true,

  bind: function() {
    var optionsData
    var optionsExpression = this.el.getAttribute('options')
    if (optionsExpression) {
      optionsData = this.vm.$eval(optionsExpression)
    }
    // initialize select2
    var self = this
    $(this.el)
      .select2({
        data: optionsData
      })
      .on('change', function() {
        self.set(this.value)
      })
  },

  update: function(value) {
    $(this.el).val(value).trigger('change')
  },

  unbind: function() {
    $(this.el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  data: {
    selected: [{
      country: 2
    }, {
      country: 1
    }],
    options: [{
      id: 1,
      text: 'USA'
    }, {
      id: 2,
      text: 'UK'
    }]
  }
})

vm.$watch('selected', function(newvalue, oldval) {
  alert('changed: ' + newvalue)
})

＆＃13;

select {
  min-width: 300px;
}

＆＃13;

Answer 1

您需要在手表上指定deep选项。数组未被修改，它包含的对象正在被修改。

Vue.directive('select', {
  twoWay: true,

  bind: function() {
    var optionsData
    var optionsExpression = this.el.getAttribute('options')
    if (optionsExpression) {
      optionsData = this.vm.$eval(optionsExpression)
    }
    // initialize select2
    var self = this
    $(this.el)
      .select2({
        data: optionsData
      })
      .on('change', function() {
        self.set(this.value)
      })
  },

  update: function(value) {
    $(this.el).val(value).trigger('change')
  },

  unbind: function() {
    $(this.el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  data: {
    selected: [{
      country: 2
    }, {
      country: 1
    }],
    options: [{
      id: 1,
      text: 'USA'
    }, {
      id: 2,
      text: 'UK'
    }]
  }
})

vm.$watch('selected', function(newvalue, oldval) {
  alert('changed: ' + newvalue)
}, {
    deep: true
})

select {
  min-width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.9/vue.min.js"></script>

<div id="el">
  <p>Selected: {{selected[0].country}}</p>
  <select v-select="selected[0].country" options="options">
    <option value="0">default</option>
  </select>
  
  <p>Selected: {{selected[1].country}}</p>
  <select v-select="selected[1].country" options="options">
    <option value="0">default</option>
  </select>
</div>

VJs正在观看数组元素

1 个答案: