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:
@@ -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)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user