bugfix> javascript > 投稿

私はvuetifyフレームワークを使用していますが、リストから項目を複数回追加する方法がわからないという問題が発生しています。ドロップダウンリストがあり、オプション foo を追加したいまたは選択時に複数のオプション。ここにデモへのリンクがありますコードペン。

だから今私がfooまたは他のオプションを選択し、それをドロップダウンリストからもう一度選択すると、それは消えます、代わりに同じオプションを持つ別のチップが必要です それに追加されましたか?

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          text: 'Foo',
          value: 'foo'
        },
        {
          text: 'Bar',
          value: 'bar'
        },
        {
          text: 'biz',
          value: 'buzz'
        },
        {
          text: 'buzz',
          value: 'buzz'
        }
      ],
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-combobox :items="items" label="Add Multiple Chips" multiple small-chips solo deletable-chips>
        <template v-slot:item="{ index, item }">
      <v-list-tile-content>
        {{item.text}}
      </v-list-tile-content>
    </template>
        <template v-slot:selection="{ index, item }">
      <v-chip close dark color="info">
        {{ item.text }}
      </v-chip> 
    </template>
      </v-combobox>
    </v-container>
  </v-app>
</div>

これを達成する方法について誰か手がかりがあれば。よろしくお願いします。ありがとうございました

回答 2 件
  • いくつかの小さな調整、

    .stop を置く  ハンドラーの後でVuetifyが処理されないようにするには、アイテムをクリックしてください

    :value にarrを使用するようにコンボボックスに指示する

    削除クリックハンドラーを v-chip に追加する  および対応する方法(注意:これはVuetify 2.1.0では機能しますが、Codepenで使用されているVuetify 1.5.14では機能しません。その特定のバージョンが必要ない場合は、最新のバージョンをインストールしてください。

    Codepen Vuetify v1.5.14

    CodeSandbox Vuetify v2.1.0

    <template>
      <div id="app">
        <v-app id="inspire">
          <v-container>
            <v-combobox
              :items="items"
              label="Add Multiple Chips"
              multiple
              small-chips
              solo
              deletable-chips
              :value="arr"
            >
              <template v-slot:item="{ index, item }">
                <v-list-tile-content @click.stop="multipleSelection(item)">{{item.text}}</v-list-tile-content>
              </template>
              <template v-slot:selection="{ index, item }">
                <v-chip close dark color="info" 
                   @click:close="deleteChip(item)" >{{ item.text }}</v-chip>
              </template>
            </v-combobox>
          </v-container>
        </v-app>
      </div>
    </template>
    <script>
    export default {
      name: "playground",
      data: () => ({
        arr: [],
        items: [
          {
            text: "Foo",
            value: "foo"
          },
          {
            text: "Bar",
            value: "bar"
          },
          {
            text: "biz",
            value: "buzz"
          },
          {
            text: "buzz",
            value: "buzz"
          }
        ]
      }),
      methods: {
        multipleSelection(item) {
          this.arr.push({...item});
          console.log(this.arr);
        },
        deleteChip(item) {
          this.arr = this.arr.filter(x => x !== item);
          console.log(this.arr);
        }
      }
    };
    </script>
    
    

  • 長い選択リストがドロップダウンメニューによって不明瞭になる問題に対処し、

    実行時のドロップダウンメニューは次のようになります(Chrome開発者ツールを使用)。

    <div class="v-menu__content theme--light menuable__content__active v-autocomplete__content"
      style="max-height: 304px; min-width: 357px; top: 149px; left: 12px; transform-origin: left top; z-index: 8;">
      <div role="listbox" tabindex="-1" class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
        id="list-261">
        <div tabindex="0" role="menuitem" id="list-item-267" class="v-list-item v-list-item--link theme--light">Foo</div>
        <div tabindex="0" role="menuitem" id="list-item-268" class="v-list-item v-list-item--link theme--light">Bar</div>
        <div tabindex="0" role="menuitem" id="list-item-269" class="v-list-item v-list-item--link theme--light">biz</div>
      </div>
    </div>
    
    

    これらのスタイルがあります

    element.style {
      max-height: 304px;
      min-width: 357px;
      top: 149px;
      left: 12px;
      transform-origin: left top;
      z-index: 8;
    }
    
    

    Vuetifyは top: 149px を変更します  選択ハンドラですが、これをオフにしたので、 updateMenuDimensions() を呼び出す必要があります  私たち自身のハンドラ multipleSelection()

    これを行うには、コンボボックスに参照を追加し、

    <v-combobox
      :items="items"
      label="Add Multiple Chips"
      multiple
      small-chips
      solo
      deletable-chips
      :value="arr"
      ref="combobox"
    >
      ...
    </v-combobox>
    
    

    次に、 nextTick() 内でupdateMenuDimensionsへの呼び出しを追加します。  選択ボックスを安定させるため。

    methods: {
      multipleSelection(item) {
        this.arr.push({ ...item });
        console.log(this.arr);
        this.$nextTick(() => this.$refs.combobox.updateMenuDimensions())
      },
      deleteChip(item) {
        this.arr = this.arr.filter(x => x !== item);
        console.log(this.arr);
        this.$nextTick(() => this.$refs.combobox.updateMenuDimensions())
      }
    }
    
    

    Codepen Vuetify v1.5.14(NBはチップを削除しない)。

あなたの答え