Question

我正在尝试基于下拉列表中的选择生成过滤器列表。我想将该过滤器列表发送到store.js以触发突出显示。到目前为止，我有一个带有以下代码的Home.vue类：

     <div class="filters" >
          <b-container>
            <b-row>
              <b-col cols="1">
                <Filters :filterData="TeamFilter" ></Filters>
              </b-col>
            </b-row>
          </b-container>
      </div>

它具有以下数据：

data() {
    return {
      TeamFilter: {
        name: "Teams",
        availableItems: [
          {
            id: 0,
            name: "Jerry",
          },
          {
            id: 1,
            name: "Freddy",
          }
        ]
      }
    },

我还有一个名为Filters.vue的单独的类：

<script>
export default {
  name: "Filters",
  props: ["filterData"],
  mounted: () => {
    console.log("Filters control has mounted");
  },
  methods: {
    filters: function() {
      return null;
    }
  }
};
</script>


<template>
  <div>
    <b-dropdown id="selected" :text="filterData.name">
      <b-dropdown-item v-for="item in filterData.availableItems" v-bind:key="item.id">{{ item.value }} 
    </b-dropdown-item>
    </b-dropdown>
 </div>
</template>

我可以从下拉菜单中进行选择，但是我不确定如何将其链接为突出显示的正方形。有谁知道如何做到这一点？

从下拉选择中触发突出显示

0 个答案: