单击下拉值后不会出现 v-chip 值，并且 chip close 不会关闭

Question

我正在尝试获取 v-chips 的值，但我不知道我更改了什么 need.Also，芯片的 X(close) 也不起作用。用另一种方式编码会好吗？请帮忙，谢谢。

这是它的样子。

Values are not displayed above the dropdown

Values are not displayed and chip close doesn't work

这是 HelloWorld.vue

的代码

<template>
<div>
     <v-row>
                  <v-col
                    class="d-flex justify-center"
                    cols="6"
                  >
                    <div class="positionButton">
                      <v-btn
                        class="accent-3 blue"
                        dark
                      >
                        Add voice
                      </v-btn>
                    </div>
                  </v-col>
                  <v-col
                    class="d-flex justify-center"
                    cols="6"
                  >
                    <VideoPrueba
                      v-for="(step, key) in steps"
                      :key="key"
                      v-model="step.selected"
                      :items="step.options"
                    />
                  </v-col>
                </v-row>
                </div>
</template>

<script>
import VideoPrueba from './VideoPrueba'
  export default {
    name: 'HelloWorld',
    components:{VideoPrueba},
   
    data: () => ({
       steps: [
      {
        title: 'Videos',
        options: ['Video 1', 'Video 2', 'Video 3', 'Video 4'],
        selected: []
      }
    ],
   } )
  }
</script>

这是 Videoprueba.vue

的代码

<template>
  <div>
    <div>
            <span v-for="(el, i) in hey" :key="el.text" class="shrink">
                <v-chip :disabled="loading" close @click="del(el, i)">
                  <v-icon left v-text="el.icon"></v-icon>
                  {{ el.text }}
                </v-chip>
          </span>
    </div>


    <v-tooltip top>
      <template #activator="{on, attrs}">
        <div
          multiple
          v-on="on"
        >

    <v-select
                v-bind="attrs"

      v-model="hey"
      :items="items"
      label="Seleccion video"
      multiple
      return-object
    >



      <template v-slot:selection="{ item, index }">
        <v-chip v-if="hey.length=== 0">
          <span> Seleccion video</span>
        </v-chip>
        
      </template>
    </v-select>
      </div>
      </template>
      <span>Select videos here,please</span>
    </v-tooltip>

  </div>
</template>

<script>
export default {
  name: "VideoPrueba",

  props: {
    items: {
      type: [Array, Object],
      default: [],
    },
   
  },
  data: () => ({
    hey: "",
    model: {
      prop: "input",
      event: "change",
    },
    
    loading: false,
    selectedItems: [],
  }),
  watch: {
    hey(val){
      console.log('val',val)
      val.map((el, i) => {
        console.log('valor de selecteditems',this.selectedItems)
          console.log('valor de el',el)

        if (!this.selectedItems.includes(el)) {
          console.log('incluido')
          this.selectedItems.push(el);
        } else {
          console.log(el,i)
          //this.selectedItems.push(el);
          this.selectedItems.slice(el, 1);
        }
      });
    }
  },
 
  methods: { 
    del(el, i){      
      console.log(el)
       console.log(i)
       this.selectedItems.splice(i, 1)
    }
  },
  
};
</script>

Answer 1

那是因为：

你的“嘿”数据是一个字符串数组而不是对象。 “嘿”不是一个属性为“.text”的对象。
您省略了关闭芯片的 :close 事件 - 参考：https://vuetifyjs.com/en/api/v-chip/#events-click:close

这是您需要的两个修复程序

<v-chip :disabled="loading" close @click:close="del(el, i)">
  <v-icon left v-text="el.icon"></v-icon>
  {{ el }}
</v-chip>

干杯

单击下拉值后不会出现 v-chip 值，并且 chip close 不会关闭

v-chip values don't appear after clicking dropdown values and chip close doesn't close

vue.js

vue-component

vuejs2

vuetify.js