我有 vm。$ watch 方法的问题,它可以观看单个变量。
我无法观看数组元素。
在下面的例子中,我无法观察下面两个选择框的变化:
\\

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)
})

select {
min-width: 300px;
}

答案 0 :(得分: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>