获取Vuetify多选组件中单击项目的值

Posted 2023-02-16

【中文标题】获取Vuetify多选组件中单击项目的值

【英文标题】：Get value of clicked item in Vuetify multiple select component

【发布时间】：2019-09-04 14:31:09

【问题描述】：

我的代码中有以下 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，尝试更改项目值并更改对象结构 - 结果始终相同。

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

【参考方案1】：

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

CodePen mirror

---

编辑：（在下面回答您的问题）~~Slot Props~~：（不要与“命名插槽”混淆）本质上允许您从子组件并使用它们在父组件中呈现。 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>

【讨论】：

谢谢！我认为这几乎是我所需要的，但有几件事我不明白：v-slot:selection='data'- 这是什么data 值？这不是整个“数据”对象，对吧？ data.parent.selectItem(data.item) - 这是什么selectItem() 方法？它从何而来？我没有看到它的任何定义......

@Igal 我已经用解释更新了我的答案，以及帮助您理解这一点的有用链接。这些被称为scoped slots aka slot props.. （不要与named slots 混淆.. 希望这会有所帮助。

是的，这有帮助！非常感谢！ :)