在Vuetify多个选择组件中获取点击项的价值

Question

我的代码中有以下v选择：

<v-select
    v-if='d.length'
    v-model='ci'
    :items='d'
    item-text='value.name'
    item-value='value.name'
    label='label'
    multiple='multiple'
    height='60'
    small-chips
    single-line
    solo
    @change='itemChanged'
  >
  <template v-slot:prepend-item v-if='multiple && title && d.length'>
    <v-list-tile
      ripple
      @click="action"
    >
      <v-list-tile-action>
        <v-icon :color="ci.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
      </v-list-tile-action>
      <v-list-tile-content>
        <v-list-tile-title>{{title}}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
    <v-divider class="mt-2"></v-divider>
  </template>
  <template v-slot:selection="{ item, index }">
    <v-chip v-if="index === 0">
      <span>{{ item.text }}</span>
    </v-chip>
    <span
      v-if="index === 1"
      class="grey--text caption"
    >(+{{ checkedItems.length - 1 }} others)</span>
  </template>
</v-select>

它接收其模型，物品和其他定义作为道具。模型和项目是具有以下结构的相同对象数组：

{text: 'text', value: {name: 'foo'}}

因此，基本上在安装组件时都会选择所有项目。

一旦用户单击列表中的项目，我想在我的itemChanged方法中接收整个对象，或者至少接收值对象。我暂时只想控制台记录接收到的对象：

itemChanged(value) {
  console.log('Changed item', value);
}

但是它将打印整个模型数组，减去单击的项

试图使用return-object，试图更改项目值并更改对象结构-总是相同的结果。

有什么主意，我怎样才能只获得被点击项目的对象/值？

Answer 1

这样的事情有用吗，还是我误解了您的问题？这样会将所选项目（作为对象）输出到页面上，而不是console.log(...)。

CodePen mirror

---

编辑：（在下面回答您的问题）~~插槽道具~~： （不要与“命名插槽”相混淆）实际上使您可以从子组件，并使用它们在父组件中进行渲染。 You can read more on scoped slots (also known as 'slot props') here

以以下代码块为例：

          <template v-slot:item='data'>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ data.item.firstName }} {{ data.item.lastName }}
              </v-list-tile-title>
            </v-list-tile-content>
          </template>

v-slot:item='data'-您可以使用所需的任何名称代替数据：v-slot:item="theItems"也可以使用（注意：您随后将使用{{ theItems.item.firstName }}...

您必须使用data.ITEM.x（指ITEM）的原因是因为这是Vuetify称scoped slot为v-select-you can read more on that here的原因。希望这会有所帮助！

---

new Vue({
  el: "#app",
  props: {
    value: {
      type: [String, Object]
    }
  },
  data() {
    return {
      chosenItems: [],
      items: [{
          firstName: "John",
          lastName: "Smith",
          Age: 44
        },
        {
          firstName: "Sarah",
          lastName: "Martin",
          Age: 32
        },
        {
          firstName: "Derick",
          lastName: "Johnson",
          Age: 39
        },
        {
          firstName: "Mary",
          lastName: "Spitzer",
          Age: 22
        },
        {
          firstName: "Wendy",
          lastName: "Macdonald",
          Age: 57
        },
      ]
    };
  },
  computed: {
    selectedItems: {
      get() {
        return this.value;
      },
      set(item) {
        // Could either emit (so you can use v-model on the parent)
        // or add to array
        this.chosenItems.push(item)
        this.$emit("input", item);
      }
    }
  }
});

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"></script>


<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-layout row>
          <v-flex>
            <v-select 
              v-model='selectedItems' 
              label='Select One Or Many' 
              :items="items" 
              item-text="firstName" 
              chips 
              clearable 
              multiple 
              return-object
            >
              <template v-slot:selection='data'>
               <v-chip
                :key="JSON.stringify(data.item)"
                close
                class="chip--select-multi"
                @input="data.parent.selectItem(data.item)"
               >
                 {{ data.item.firstName }} {{ data.item.lastName }}
                </v-chip>
              </template>
              <template v-slot:item='data'>
                <v-list-tile-content>
                  <v-list-tile-title>
                    {{ data.item.firstName }} {{ data.item.lastName }}
                  </v-list-tile-title>
                </v-list-tile-content>
              </template>
            </v-select>
          </v-flex>
        </v-layout>
        <div class="mt-5">
          <v-layout>
            <v-flex>
              <h3>Chosen Items Will Be Displayed Here:</h3>
            </v-flex>
          </v-layout>
          <div v-for="(chosen, index) in chosenItems">
            <hr/>
            <div v-for="(eachChosen, i) in chosen">
              {{ eachChosen }}
            </div>
            <hr/><br/>
          </div>
        </div>
      </v-container>
    </v-content>
  </v-app>
</div>