[英]Parsing Array value as props in Vue.JS
I have the following component which are used for "select" option in parent:我有以下组件用于父级中的“选择”选项:
<template>
<label class="label" for="select">{{ label }}</label>
<select class="form-control form-control" v-bind:name="name" id="select">
<option v-bind:options="options" v-for="(value, index) in options" :key="index">{{ value.objectValue }}</option>
</select>
</template>
export default {
name: "Select",
props: {
label: String,
options: Array,
name: String,
objectValue: String
}
}
The array I parse consist of objects and looks like this:我解析的数组由对象组成,如下所示:
let array = [{name: valueOne}, {name: valueTwo}]
My problem is when I pass the prop "objectValue" it does not select it.我的问题是当我通过道具“objectValue”时它没有 select 它。 This is how I use the component:
这就是我使用组件的方式:
<Select label="Select country" objectValue="name" v-bind:options="array"/>
So I get a blank array, but with the correct amount of values.所以我得到一个空白数组,但值的数量正确。 So the problem should be around the parsing of the "name" value from objectValue props.
所以问题应该围绕从 objectValue 道具解析“名称”值。
The select
needs a v-model
with an intial value. select
需要一个具有初始值的v-model
。
Declare a data property (named selectedOption
), and bind <select>.v-model
to it:声明一个数据属性(名为
selectedOption
),并将<select>.v-model
绑定到它:
<template> <select v-model="selectedOption">...</select> </template> <script> export default { data() { return { selectedOption: null } } } </script>
Add a watcher on objectValue
that copies the new value to selectedOption
:在
objectValue
上添加一个观察者,将新值复制到selectedOption
:
export default { watch: { objectValue: { handler(newValue) { this.selectedOption = newValue }, immediate: true, }, } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.