如何在 VueJS 的 <md-select> 组件上返回 v-model 上的对象？

Question

我正在使用 Vue 材质组件，并且可以选择一个值。情况是当用户选择一个选项时我得到原始值（字符串、布尔值、数字），但我想得到整个对象。

    <div class="item-select-grupo-insumos">
      <md-field>
        <label for="codigo-grupo-insumos">Grupo</label>
        <md-select
          name="codigo-grupo-insumos"
          id="codigo-grupo-insumos"
          v-model="formNewInsumo.codigoGrupoInsumos" // Here I would like get the whole object, but it get the unic value.
          md-dense
        >
          <md-option
            v-for="(grupo,idx) in gruposDeInsumos"
            :key="idx"
            :value="grupo.codigo"
          >{{grupo.codigo}} | {{grupo.nome}}</md-option>
        </md-select>
      </md-field>
    </div>

...
data() {

return {
      gruposDeInsumos: [{
       codigo: "G00032",
​       nome: "asdasd",
​       tipo: "products"
}],
      formNewInsumo: {
        nome: "",
        codigoGrupoInsumos: "",
        unidade: "",
        wholeObject: {}
      },
}

整个对象格式用于：v-for="(grupo,idx) in gruposDeInsumos"

grupo: {
codigo: "G00032",
​
nome: "asdasd",
​
tipo: "products"
}

Answer 1

您是否尝试过将对象作为“md-option”中的值传递？
这样，选项应该采用对象的值而不是原始值。

<md-option
    v-for="(grupo,idx) in gruposDeInsumos"
    :key="idx"
    :value="grupo"
  >{{grupo.codigo}} | {{grupo.nome}}</md-option>