Как передать выбранные параметры из компонента (b-card) и передать его компоненту с множественным выбором в vue

Question

Я хочу передать данные из компонента b-card в multiselect- vue и использовать их с тегом / событием Input

, это мой компонент множественного выбора

<multiselect
    class="display-controls"
    track-by="id"
    :value="value"
    :multiple="isMultiple"
    :placeholder="placeholder"
    :options="options"
    :options-limit="20"
    :internal-search="internalSearch"
    :selectLabel="$t('selectLabel')"
    :taggable="isTaggable"
    :customLabel="$utils.handleCustomLabel"
    :max="handleMax"
    :tagPlaceholder="$t('msTagPlaceholder')"
    :loading="isSearching"
    @input="handleInput"
    @search-change="handleSearchChange"
    @close="handleClose"
    @remove="handleTagPlaceholders"
    @tag="handleTag"
    @open="$utils.msHandleOpen"
    open-direction="bottom"
    :showLabels="false"
>

Это моя b-карта, содержащая параметр, который я хочу передать данные

<b-card id="result-modal" align="left" @click="handleFormResultClick(entity.name || entity.title)" v-for="entity in options" :key="entity.id" :title="entity.name || entity.title" no-body class="overflow-hidden" style="max-width: 100%; border: none; cursor: pointer">

            <!-- Option for Book -->
            <b-row v-if="isBook" align-v="center" no-gutters>
              <b-col v-if="languageComponent === 'En'" align-self="center" md="12">
                <b-card-body class="card-list" style="padding-right: 0; padding-left: 0">
                  <b-card-text v-if="entity.title_en" id="list-modal">
                    <span v-html="highlightChar(entity.title_en)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_en" class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name_en }} in {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name }} in {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                  <b-card-text v-else-if="!entity.title_en" id="list-modal">
                    <span v-html="highlightChar(entity.title)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_en" class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name_en }} in {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name }} in {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                </b-card-body>
              </b-col>
              <b-col v-if="languageComponent === 'Id'" align-self="center" md="12">
                <b-card-body class="card-list" style="padding-right: 0; padding-left: 0">
                  <b-card-text v-if="entity.title_ind" id="list-modal">
                    <span v-html="highlightChar(entity.title_ind)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_ind" class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name_ind }}, pada {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name }}, pada {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                  <b-card-text v-else-if="!entity.title_ind" id="list-modal">
                    <span v-html="highlightChar(entity.title)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_ind" class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name_ind }}, pada {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name }}, pada {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                </b-card-body>
              </b-col>
            </b-row>
</b-card>

Это то, что я пытался выбрать Input и Tag из списка множественного выбора, и метод handleFormResultClick, чтобы выбрать запрос из b -card и передать его в компонент множественного выбора

handleInput (query) {
  this.$emit('input', query)
  this.$emit('selected', query)
  console.log(query)
},

handleTag (query) {
  const obj = {
    id: `${this.model.charAt(0)}_${this.$utils.genRandomString()}`,
    isCustom: true,
  }
  const title = _.startCase(query)

  if (this.model === 'or' || this.model === 'conference' || this.model === 'organisation') {
    obj.name = title
  } else {
    obj.title = title
  }

  if (this.isMultiple) {
    const inputValMulti = this.value.push(obj)
    this.searchQuery = ''
    console.log(inputValMulti)
  } else {
    const inputValSolo = this.handleInput(obj)
    this.searchQuery = ''
    console.log(inputValSolo)
  }
},

handleFormResultClick (query) {
  const searchEntitySubmit = query
  clearTimeout()
  setTimeout(() => {
    this.$emit('selected', query)
    this.taggingSubmit = searchEntitySubmit
    this.handleTag(value)
    console.log(value)
  }, 100)
  this.showModalEntityResult = false
},

Для некоторого контекста основная функция (handleFormResultClick) предназначена для

• получения значения из данных b-карты и
• передать его в мультиселектор (один или несколько тегов

Как мне этого добиться?

Спасибо за помощь!

Answer 1

Вы можете передавать данные либо через vuex, либо через eventBus. Вы не показывали logi c для своей строки vuex, но показывали выбросы, поэтому я покажу eventBus logi c. Я пропустил любую логику преобразования данных c, я показываю, как вы можете передавать данные.

В вашем файле main.js вам нужно объявить свой eventBus. оно должно быть объявлено до объявления приложения Vue.

export const eventBus = new Vue(); // this must come before creating Vue app
new Vue({ 
  el: '#app',
  render: h => h(App)
})

В обоих ваших компонентах вам необходимо импортировать eventBus:

import {eventBus} from '<path to main.js>'

В компоненте b-card вы отправляете данные в выбранном вами методе, я использовал handleFormResultClick для этого примера:

handleFormResultClick () { 
  eventBus.$emit('selected', query) // where query is the data you want to pass
}

В компоненте multiselect вам нужно настроить прослушиватель для вашего событие с использованием created ловушки жизненного цикла. Метод $on принимает в качестве параметра функцию callbcak, где у вас есть доступ к данным, переданным из другого компонента, и он может обрабатывать их там:

created() {
    eventBus.$on('selected', (query) => {
        // process your query data in this callback function
    })
}