vuejs2 - 传递许多属性类星体选择

Question

我收到有关组件创建周期的这些数据：

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

我让我的 q-select 传递标题和 id 给它。但是，如何在我的选择的更改事件中获得第三个属性/参数以获取类型值？示例：我想在我的选择的更改事件中获取所选选项的值，并在某处获取类型。换句话说，是这样的：

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

Answer 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)
}

这可能不是最干净的解决方案，但它完成了工作。或者，您可以将 id 定义为valueid（因为它是唯一的），然后如果您需要在type原始数组中进行搜索。例如，选项数组可以由计算属性创建。