2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-26 04:34:04 +03:00

Added resetOnOptionsChange parameter to allow changing the options of the select without resetting the value. This is extra useful for ajax request, especially slow ajax requests

This commit is contained in:
Blaine Ehrhart
2016-06-20 16:17:00 -07:00
parent 883d318c4b
commit 361aba64d9
3 changed files with 67 additions and 8 deletions
+11 -2
View File
@@ -383,7 +383,16 @@
}
return newOption
}
}
},
/**
* When false, updating the options will not reset the select value
* @type {Boolean}
*/
resetOnOptionsChange: {
type: Boolean,
default: true
},
},
data() {
@@ -402,7 +411,7 @@
}
},
options() {
if (!this.taggable) {
if (!this.taggable && this.resetOnOptionsChange) {
this.$set('value', this.multiple ? [] : null)
}
},
+7 -6
View File
@@ -166,10 +166,13 @@ table.coverage td span.cline-any {
/* dark green */
.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
.high .chart { border:1px solid rgb(77,146,33) }
.medium .chart { border:1px solid #666; }
.medium .cover-fill { background: #666; }
/* dark yellow (gold) */
.medium .chart { border:1px solid #f9cd0b; }
.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
/* light yellow */
.medium { background: #fff4c2; }
/* light gray */
span.cline-neutral { background: #eaeaea; }
.cbranch-no { background: yellow !important; color: #111; }
@@ -177,8 +180,6 @@ table.coverage td span.cline-any {
.fstat-skip { background: #ddd; color: #111 !important; }
.cbranch-skip { background: #ddd !important; color: #111; }
span.cline-neutral { background: #eaeaea; }
.medium { background: #eaeaea; }
.cover-fill, .cover-empty {
display:inline-block;
+49
View File
@@ -752,6 +752,21 @@ describe('Select.vue', () => {
})
})
})
it('should not reset the selected value when the options property changes', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value" :multiple="true" taggable></v-select></div>',
components: {vSelect},
data: {
value: [{label: 'one'}],
options: [{label: 'one'}]
}
}).$mount()
vm.$children[0].options = [{label: 'two'}]
Vue.nextTick(() => {
expect(vm.$children[0].value).toEqual([{label: 'one'}])
done()
})
})
})
describe('Asynchronous Loading', () => {
@@ -839,4 +854,38 @@ describe('Select.vue', () => {
})
})
})
describe('Reset on options change', () => {
it('should not reset the selected value when the options property changes', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value" :reset-on-options-change="false"></v-select></div>',
components: {vSelect},
data: {
value: 'one',
options: ['one', 'two', 'three']
}
}).$mount()
vm.$children[0].options = ['four', 'five', 'six']
Vue.nextTick(() => {
expect(vm.$children[0].value).toEqual('one')
done()
})
})
it('should reset the selected value when the options property changes', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
components: {vSelect},
data: {
value: 'one',
options: ['one', 'two', 'three']
}
}).$mount()
vm.$children[0].options = ['four', 'five', 'six']
Vue.nextTick(() => {
expect(vm.$children[0].value).toEqual(null)
done()
})
})
})
})