当 v-model 值更改时,自定义 Vue select 组件未更新 selected 选项
Custom Vue select component not updating selected option when v-model value changed
我正在尝试使用 v-model
模式将 select 包装在 Vue 自定义组件中,如 in the docs 所述。
我面临的问题是我的自定义 select 组件收到以下错误消息:
[Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders. Instead, use a
data or computed property based on the prop's value. Prop being
mutated: "value"
found in
--->
但是,当我制作 value
数据 属性 时,我失去了预期的功能。也就是说,当绑定值更改时,select 框不会更新。双向绑定丢失
在不发出警告的情况下保持我期望的行为的正确方法是什么?
这是一个演示问题的交互式示例(最好全屏显示)。
Vue.component('dynamic-select-ex1', {
template: '#dynamic-select-template',
props: ['value', 'options'],
methods: {
changed() {
// custom input components need to emit the input event
this.$emit('input', event.target.value)
},
},
})
Vue.component('dynamic-select-ex2', {
template: '#dynamic-select-template',
props: ['options'],
data() {
return {
value: null,
}
},
methods: {
changed() {
// custom input components need to emit the input event
this.$emit('input', event.target.value)
},
},
})
let example = new Vue({
el: '#example',
data() {
return {
selected: null,
options: [
{ text: 'Hello', value: 1 },
{ text: 'World', value: 2 },
{ text: 'Blah', value: 3 },
{ text: 'Blerg', value: 4 },
]
}
},
computed: {
text() {
if (!this.selected) return
return this.options.find(({ value }) => value == this.selected).text
},
},
methods: {
select(value) {
this.selected = value
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="dynamic-select-template">
<select v-model="value" @change="changed">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
</script>
<div id="example">
<label for="direct">Vue behaviour for native select</label><br>
<select id="direct" v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select><br>
<div>Vue behaviour for custom component. `value` is a prop. Warning output in console when user selects option</div>
<dynamic-select-ex1 v-model="selected" :options="options"></dynamic-select-ex1><br>
<div>Vue behaviour for custom component. `value` is a data property. two-way binding is broken. Selected option not updated when `value` changes.</div>
<dynamic-select-ex2 v-model="selected" :options="options"></dynamic-select-ex2><br>
<br>Selected: {{ text }}<br><br>
<button @click="select(1)">Hello</button>
<button @click="select(2)">World</button>
<button @click="select(3)">Blah</button>
<button @click="select(4)">Blerg</button><br>
</div>
计算Setter
对于 v-model
,使用 computed setter 和 v-model
而不是 value
,以避免改变 prop。
您可以去掉 change
侦听器。
<select v-model="model">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
Vue.component('dynamic-select-ex1', {
template: '#dynamic-select-template',
props: ['value', 'options'],
computed: {
model: {
get() { return this.value },
set(value) { this.$emit('input', value) }
}
}
})
当访问计算值时,它 returns 属性值,当它被设置时,它会发出。
或:value
、@input
和$event.target.value
另一种选择是从模板中对 value
和 $emit
进行单向绑定:
<select :value="value" @input="$emit('input', $event.target.value)">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
Vue.component('dynamic-select-ex1', {
template: '#dynamic-select-template',
props: ['value', 'options'],
})
我正在尝试使用 v-model
模式将 select 包装在 Vue 自定义组件中,如 in the docs 所述。
我面临的问题是我的自定义 select 组件收到以下错误消息:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
found in
--->
但是,当我制作 value
数据 属性 时,我失去了预期的功能。也就是说,当绑定值更改时,select 框不会更新。双向绑定丢失
在不发出警告的情况下保持我期望的行为的正确方法是什么?
这是一个演示问题的交互式示例(最好全屏显示)。
Vue.component('dynamic-select-ex1', {
template: '#dynamic-select-template',
props: ['value', 'options'],
methods: {
changed() {
// custom input components need to emit the input event
this.$emit('input', event.target.value)
},
},
})
Vue.component('dynamic-select-ex2', {
template: '#dynamic-select-template',
props: ['options'],
data() {
return {
value: null,
}
},
methods: {
changed() {
// custom input components need to emit the input event
this.$emit('input', event.target.value)
},
},
})
let example = new Vue({
el: '#example',
data() {
return {
selected: null,
options: [
{ text: 'Hello', value: 1 },
{ text: 'World', value: 2 },
{ text: 'Blah', value: 3 },
{ text: 'Blerg', value: 4 },
]
}
},
computed: {
text() {
if (!this.selected) return
return this.options.find(({ value }) => value == this.selected).text
},
},
methods: {
select(value) {
this.selected = value
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="dynamic-select-template">
<select v-model="value" @change="changed">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
</script>
<div id="example">
<label for="direct">Vue behaviour for native select</label><br>
<select id="direct" v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select><br>
<div>Vue behaviour for custom component. `value` is a prop. Warning output in console when user selects option</div>
<dynamic-select-ex1 v-model="selected" :options="options"></dynamic-select-ex1><br>
<div>Vue behaviour for custom component. `value` is a data property. two-way binding is broken. Selected option not updated when `value` changes.</div>
<dynamic-select-ex2 v-model="selected" :options="options"></dynamic-select-ex2><br>
<br>Selected: {{ text }}<br><br>
<button @click="select(1)">Hello</button>
<button @click="select(2)">World</button>
<button @click="select(3)">Blah</button>
<button @click="select(4)">Blerg</button><br>
</div>
计算Setter
对于 v-model
,使用 computed setter 和 v-model
而不是 value
,以避免改变 prop。
您可以去掉 change
侦听器。
<select v-model="model">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
Vue.component('dynamic-select-ex1', {
template: '#dynamic-select-template',
props: ['value', 'options'],
computed: {
model: {
get() { return this.value },
set(value) { this.$emit('input', value) }
}
}
})
当访问计算值时,它 returns 属性值,当它被设置时,它会发出。
或:value
、@input
和$event.target.value
另一种选择是从模板中对 value
和 $emit
进行单向绑定:
<select :value="value" @input="$emit('input', $event.target.value)">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
Vue.component('dynamic-select-ex1', {
template: '#dynamic-select-template',
props: ['value', 'options'],
})