传递许多属性类星选择

时间:2018-07-19 14:59:09

标签: vuejs2 quasar-framework

我在组件的创建周期中收到了这些数据:

{title: ‘any title’, type: ‘medical’, id: ‘mongo objectid here’}

,然后我将其q选择传递的标题和ID设置为它。但是,如何在选择的更改事件上获取第三个属性/参数以获取类型值? 示例:我想在选择的更改事件中获取所选选项的值,并在某处获取类型。换句话说,就是这样:

<select>
   <option value="any value" type="medical">Any title </option>
   <option value="any value 2" type="child">Another title here </option>
</select>

1 个答案:

答案 0 :(得分:1)

您可以将value设置为包含类型和ID的对象。像这样:

data () {
    selectOptions: [{
        label: yourInitialObject.title,
        value: {
           id: yourInitialObject.id,
           type: yourInitialObject.type
        }
    }]
}

然后与q-select一起使用,如下所示:

<q-select :options="selectOptions" v-model="selectedOption" @input="onSelectionChanged"/>

@input事件将新值传递给您选择的可以访问类型的方法,或者您只使用绑定的v-model:

onSelectionChanged: function (newValue) {
    console.log(newValue.id)
    console.log(newValue.type)
}

这可能不是最干净的解决方案,但已完成工作。或者,您可以仅将value定义为ID(因为它是唯一的),然后如果需要type,请在原始数组中进行搜索。例如,可以通过计算属性来创建options数组。