将值从 vue-multiselect.js 组件发送到主视图

Question

我想将数据从 MultiSelectFilter 组件传递到 Home.vue 视图。 当我在视图中使用 console.log 时，我没有得到任何结果。 我查看了有关使用 @input 事件的文档（https://vue-multiselect.js.org/#sub-events）来获取对我的选择的所有更改，但它不起作用。

我是 vueJS 新手，我不明白我的错误。

我也尝试选择所有默认值，但我无法更改初始化时的值。

我的目标是能够在我的视图中循环以拥有多个多个选择器，这就是我创建组件的原因。

我的家.vue

<template>
    <main id="Home-page">
        <h1>Dashboard</h1>
        <div class="filter-wrapper">
            <div class="filter-icon">
                <font-awesome-icon icon="fa-solid fa-filter" />
            </div>
            <div class="filter-content">
                <MultiSelectFilter :options="teamOptions" label="teams"/>
            </div>
        </div>
    </main>
</template>

<script>
import MultiSelectFilter from "@/components/MultiSelectFilter.vue";
import axios from 'axios';


export default {
    components: {
        MultiSelectFilter,
    },
    data() {
        return {
            teamOptions: [],
        };
    },
    methods: {
        updateSelectedOptions(value) {
            console.log(this.value = value)
        },
    },
    mounted() {
        axios
            .get("/api/teams")
            .then((response) => {
                const oReturn = []
                for (const [key, table] of Object.entries(response.data[0])) {
                    oReturn.push(Object.values(table).toString().toUpperCase())
                }
                this.teamOptions = oReturn;
            })
            .catch((error) => {
                console.error("Teams request error : ", error);
            });
    },
};
</script>

我的MultiSelectFilter.vue

<template>
  <multiselect v-model="selectedOptions" :select-group-label="selectGroupLabel"
    group-values="data" group-label="all" :group-select="true" :options="transformedOptions" :placeholder="label"
    :multiple="true" :searchable="searchable" :close-on-select="false" @input="updateSelectedOptions">
    <template v-slot:noResult>{{ noResult }}</template>
  </multiselect>
</template>
<script>
import Multiselect from 'vue-multiselect';

export default {
  components: {
    Multiselect,
  },
  props: {
    options: Array,
    label: String,
  },
  data() {
    return {
      selectedOptions: [],
      noResult: "No result. Try again !",
      // value: [],
    };
  },
  computed: {
    transformedOptions() {
      return [{
        all: 'Tous',
        data: this.options,
      }];
    },
  },
  methods: {
    updateSelectedOptions(selectedOptions) {
      this.selectedOptions = selectedOptions;
      this.$emit('update:selectedOptions', selectedOptions);
    },
  }
};
</script>

Answer 1

需要监听父组件中的事件。

这里是文档：https://vuejs.org/guide/components/events.html

为此，您可以添加

@select="updateSelectedOptions"

Home.vue

<template>
    <main id="Home-page">
        <h1>Dashboard</h1>
        <div class="filter-wrapper">
            <div class="filter-icon">
                <font-awesome-icon icon="fa-solid fa-filter" />
            </div>
            <div class="filter-content">
                <MultiSelectFilter :options="teamOptions" label="teams" @select="updateSelectedOptions"/>
            </div>
        </div>
    </main>
</template>

MultiSelectFilter.vue

methods: {
  updateSelectedOptions(selectedOptions) {
    this.selectedOptions = selectedOptions;
    this.$emit('select', selectedOptions);
  },
}