Question

我想将数据从b卡组件传递到multiselect-vue并与tag / 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卡中选择查询并将其传递给multiselect组件的尝试

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传递数据。您没有显示vuex弦的逻辑，但显示了发射，因此我将显示eventBus逻辑。我已经跳过了任何数据转换逻辑，只展示了如何传递数据。

您需要在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
    })
}

如何从组件（B卡）传递所选选项并将其传递给Vue中的多选组件

1 个答案: