1

我的代码中有以下 v-select：

<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>

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

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

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

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

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

但它会打印整个模型数组，减去点击的项目

尝试使用return-object，尝试更改 item-value 并更改对象结构 - 总是相同的结果。

任何想法如何才能仅获取单击的项目对象/值？

4

1 回答 1

1

像这样的工作，还是我误解了你的问题？这会将所选项目（作为对象）输出回页面上，而不是console.log(...).

CodePen 镜子

编辑：（在下面回答您的问题）~~Slot Props~~：（不要与“命名插槽”混淆）本质上允许您从子组件中获取属性并使用它们在父组件中呈现。您可以在此处阅读有关作用域插槽（也称为“插槽道具”）的更多信息

以下面的代码块为例：

          <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'- 你可以使用任何你想要的名字来代替 data:v-slot:item="theItems"也可以（注意：你可以使用{{ theItems.item.firstName }}...

您必须使用data.ITEM.x（指ITEM）的原因是因为这就是 Vuetify 所要求scoped slot的v-select-您可以在此处阅读更多内容.. 希望这会有所帮助！

在此处输入图像描述

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>

于 2019-04-14T17:25:23.590 回答