v-select 同步修饰符将带有 id 的文本从子级传递给父级答案

【问题标题】：v-select sync modifier pass text with id from child to parentv-select 同步修饰符将带有 id 的文本从子级传递给父级
【发布时间】：2019-12-07 23:54:54
【问题描述】：

我在子组件中有以下 v-select。

<VSelect
                label="Attribute"
                :items="addOnLabelItems"
                :value="addOnLabelId"
                @input="
                  $emit('update:addOnLabelId', $event)
                "
                solo
                outline
                reverse
                type="text"
              />

在父级中，我得到了 addOnLabelId 的 .sync 修饰符。原来$emit 中传递的 $event 只是所选用户选择的 id。

问题 1)：如何同时传递带有 id 的文本？

问题2）是否有可能包括v-select的另一个同步修饰符，以便在选择更改时，它会抛出两个$emits（抛出ID的一个，以及抛出文本的一个）和父组件，我可以捕获那些分开的？

【问题讨论】：

你可以创建一个方法来做你想做的事，然后把它挂到 @input
是的，但@input 只会返回 id。然后我必须遍历我的项目并找到具有该返回 ID 的特定对象。当我找到它时，我应该更新它。这就是我不想要的——循环播放。

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

您可以在 v-select 中将 objects 作为项目传递，但您必须将 value 和 text 关联起来 使用 item-text 和 item-state。

如果您想要返回一个对象，那么您还必须将 return-object 属性添加到 v-select。 (https://vuetifyjs.com/en/components/selects#customized-item-text-and-value)

return-object 在 Vuetify 文档中描述：

更改选择行为以直接返回对象，而不是比 item-value 指定的值

HTML/Vue：

<div id="app">
  <v-container fluid grid-list-xl>
    <v-layout wrap align-center>
      <v-flex xs12 sm6 d-flex>
        <v-select
          :items="items"
          label="Attributes"
          item-text="state"
          item-value="abbr"
          @input="atInput($event)"
          @change="atInput($event)"
          return-object
        ></v-select>
      </v-flex>
    </v-layout>
  </v-container>
</div>

还有 JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [
      { state: 'Florida', abbr: 'FL' },
      { state: 'Georgia', abbr: 'GA' },
      { state: 'Nebraska', abbr: 'NE' },
      { state: 'California', abbr: 'CA' },
      { state: 'New York', abbr: 'NY' },
    ],
  },
  methods: {
    atInput(event) {
      console.log(event)
    }
  }
})

这是一个有效的 Codepen：https://codepen.io/mukagergely/pen/wVJLyQ

如果您查看 Codepen 中的控制台，它会记录返回的 $event 是一个对象。

我还在 v-select 中添加了 @input 和 @change，但您不需要两者。

我希望这可以帮助您解决问题。

【讨论】：