Question

我从API得到以下响应：

[
    {
        "id": 6,
        "nombre": "Pechuga de pollo",
        "categoria": "Pollo",
        "existencia": 100
    },
    {
        "id": 7,
        "nombre": "Pierna de pavo",
        "categoria": "Pollo",
        "existencia": 100
    },
    {
        "id": 8,
        "nombre": "Lonja de pescado",
        "categoria": "Pescado",
        "existencia": 200
    },
    {
        "id": 9,
        "nombre": "Coca Cola",
        "categoria": "Bebida",
        "existencia": 200
    },
    {
        "id": 10,
        "nombre": "Jugo de naranja",
        "categoria": "Bebida",
        "existencia": 200
    }
]

所以我需要用“ categoria”值过滤这些json，然后在模板上填充三种不同的select输入。

我尝试使用filter（）方法，但我想我做错了：

///This is the function that filter needs on the argument:

filtradoBebida(bebida){
             bebida.categoria == "Bebida"
    },

///This is the function where I apply the filter method:

filtrarProductos(){
       this.bebidas = productosLista.filter(filtradoBebida)
 }

我想用json填充选择，值categoria ==“ Bebida”，其他选择输入用json填充值==“ Pollo”。

“ bebidas”是我数据中的一个数组 ““ productosLista”是一个接收API响应的数组。

您知道通过过滤json值来填充vuejs中的选择的另一种方法吗？

Answer 1

您没有正确使用filter。

我建议使用ES6 arrow function：

///This is the function where I apply the filter method:

filtrarProductos () {
       this.bebidas = productosLista.filter(x => x.categoria === "Bebida")
 }

Answer 2

使用computed property。这是可以过滤其items的组件的基本轮廓：

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // Set this via an API call
      // Here we assume an item has: id, text, category
      items: [],
      // Use this as the v-model for a select
      // Here we assume '' is "no selection"
      category: '',
    };
  },
  computed: {
    filteredItems() {
      // Show all of the items if there is not category filter
      if (this.category === '') return this.items;
      return this.items.filter(item => item.category === this.category);
    },
  },
};
</script>

Answer 3

我对filtradoBebida之后的逗号有点困惑。
好像它是某些对象中的属性。
因此，需要this从该对象内部调用它。

作为正确的过滤谓词，它还应返回布尔值。
您总是返回undefined。

所以，尝试

filtradoBebida(bebida){
             return bebida.categoria == "Bebida"
    },

///This is the function where I apply the filter method:

filtrarProductos(){
       this.bebidas = productosLista.filter(this.filtradoBebida)
 }

Answer 4

您还可以使用array.reduce创建一个categoryMap，其中每个类别键都可以保存类似类别产品的列表。然后使用此过滤后的产品列表填充您的3个选择的组件，如下所示：

const productosLista = [{
    "id": 6,
    "nombre": "Pechuga de pollo",
    "categoria": "Pollo",
    "existencia": 100
  },
  {
    "id": 7,
    "nombre": "Pierna de pavo",
    "categoria": "Pollo",
    "existencia": 100
  },
  {
    "id": 8,
    "nombre": "Lonja de pescado",
    "categoria": "Pescado",
    "existencia": 200
  },
  {
    "id": 9,
    "nombre": "Coca Cola",
    "categoria": "Bebida",
    "existencia": 200
  },
  {
    "id": 10,
    "nombre": "Jugo de naranja",
    "categoria": "Bebida",
    "existencia": 200
  }
]

const categoryMap = productosLista.reduce((acc, dt) => {
  acc[dt.categoria] = acc[dt.categoria] ? [...acc[dt.categoria], dt] : [dt]
  return acc;
}, {});

console.log(categoryMap);

for (category in categoryMap) {
  let sel = document.createElement('select');
  let categories = categoryMap[category];
  categories.forEach(category => {
    let option = document.createElement("option");
    option.setAttribute("value", category.nombre);
    option.text = category.nombre;
    sel.appendChild(option);
  });
  document.body.append(sel);
}

筛选选择输入的最佳方法是哪种？

4 个答案: