为什么排序方法在父组件中不起作用？

Question

这是我在Vuejs中的第一个项目。 我有一个产品列表，想按价格进行排序。我构建了两个组件，并试图通过发射事件将类别方法从子组件（下拉按钮）传递给父母。但是经过大量尝试，我找不到任何帮助！

这个孩子组成部分：

<template>
  <div class="dropdown">
    <button
      @click="toggleShow(); $emit('sortPrice')"
      class="dropbtn"
    >
      {{ title }}
      <span class="material-icons-outlined"> {{ icon }} </span>
    </button>

    <div v-if="showMenu" class="menu">
      <div class="menu-item" v-for="(item, index) in this.items" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dropdown-menu",

  props: {
    title: String,
    icon: String,
    items: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      showMenu: false
    };
  },

  methods: {
    toggleShow: function () {
      this.showMenu = !this.showMenu;
    },

    sortPrice: function () {
      this.$emit("sort", this.sortPrice);
    },
  },
};
</script>

此父级组件：

<template>
    <dropdown
          :title="sortedBy"
          :items="arrangements"
          :icon="material_icons"
          @sort="sortByPrice"
    ></dropdown>
</template>

<script>
import Dropdown from "@/components/Dropdown.vue";

export default {
  components: {
    Dropdown,
  },

  data() {
    return {
      sortedBy: "Featured",
      arrangements: ["Featured", "Lowest", "Highest"],
      material_icons: "expand_more",
      productData: require("@/data/store-data.json"),
    };
  },
  methods: {
    sortByPrice: function () {
      let realProducts = this.productData.products;
      let sortedProducts = realProducts.sort((a, b) => {
        if (this.sortedBy === "Highest") {
          return b.price - a.price;
        } else if (this.sortedBy === "Lowest") {
          return a.price - b.price;
        }
      });
      return sortedProducts;
    },
  },
};
</script>

Answer 1

建议：

• 在单击单个项目时发射，而不是单击按钮时发射。您想在用户进行选择时发射，
• 因此这意味着通过@conce@click =“ sortprice（item）”在sortprice函数中调用菜单界div的sortprice函数
• ，然后传递paramter，函数（item）{并将其作为第二个参数传递给您的emit调用：this。$ emit（“ stort”，item）;。父必须知道
• 父组件中选择的内容，sortByprice函数，接受项目参数，sortByPrice：function（item）{并使用它来设置sortedby属性：this.sortedby = item;
• 在我的示例中，在计算属性中进行排序，并在我的示例中称为sortedProducts。

例如，父母：

<template>
  <h2>Main App</h2>
  <dropdown
    :title="sortedBy"
    :items="arrangements"
    @sort="sortByPrice"
  ></dropdown>
  <div>
    <h3>Products</h3>
    <ul>
      <li v-for="product in sortedProducts" :key="product.index">
        {{ product.name }} ${{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import Dropdown from "@/components/Dropdown.vue"; 

export default {
  components: {
    Dropdown,
  },

  data() {
    return {
      sortedBy: "Featured",
      arrangements: ["Featured", "Lowest", "Highest"],
      productData: {
        // dummy data for demo purposes
        products: [
          { index: 1, name: "product A", price: 1, featured: true },
          { index: 2, name: "product B", price: 2, featured: false },
          { index: 3, name: "product C", price: 6, featured: true },
          { index: 4, name: "product G", price: 4, featured: false },
          { index: 5, name: "product V", price: 0, featured: true },
        ],
      },
    };
  },
  methods: {
    sortByPrice: function (item) {
      this.sortedBy = item;
    },
  },
  computed: {
    sortedProducts: function () {
      if (this.sortedBy === "Featured") {
        return this.productData.products.filter((prod) => prod.featured);
      } else if (this.sortedBy === "Highest") {
        return this.productData.products.sort((a, b) => b.price - a.price);
      } else if (this.sortedBy === "Lowest") {
        return this.productData.products.sort((a, b) => a.price - b.price);
      }
      // the "just-in-case" default return
      return this.productData.products;
    },
  },
};
</script>

和孩子下拉。

<template>
  <div class="dropdown">
    <button @click="toggleShow()" class="dropbtn">
      {{ title }}
    </button>

    <div v-if="showMenu" class="menu">
      <div
        class="menu-item"
        v-for="(item, index) in this.items"
        :key="index"
        @click="sortPrice(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dropdown-menu",

  props: {
    title: String,
    items: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      showMenu: false,
    };
  },

  methods: {
    toggleShow: function () {
      this.showMenu = !this.showMenu;
    },

    sortPrice: function (item) {
      this.$emit("sort", item);
      this.toggleShow();
    },
  },
};
</script>