Question

我是一名React开发人员，对Vue非常陌生。我非常清楚，在更改状态时，Vue比React更简单，但是我不了解逻辑。这是我想要为产品创建Vue过滤器组件的问题，并根据不同下拉列表中的类别选择显示产品。因此，我有一个下拉名称“类别”，我想基于此类别显示产品列表，而不是拉出所有产品，不管是否相关。这是我的模板：

export default {
data() {
  return {
    recipes: [],
    products: [],
    productSelected: '',
    productDropdown: false,
    categories: [],
    categorySelected: '',
    categoryDropdown: false,
    filtersApplied: [],
    search: '',
    mainIngredients: [],
    mainIngredientSelected: '',
    mainIngredientDropdown: false,
    mobileOptions: false,

    ...window.RecipeFilterConfig,
  };
},
computed: {
  hideFeatured() {
    return this.filteredItems.length !== this.recipes.length;
  },
  filteredItems() {
  return this.recipes.filter((recipe) => {
    let searchItem = recipe.name.toLowerCase().includes(this.search.toLowerCase());
    if (searchItem) {
      return searchItem;
    }
  })
  .filter((recipe) => {
    if (this.categorySelected){
      let matchedCategory = false;
      recipe.category.forEach(value => {
        if(value.name.includes(this.categorySelected)) matchedCategory = true;
      });
      return matchedCategory;
    } else {
      return true;
    }
  })
  .filter((recipe) => {
    if (this.categorySelected){
      let matchedProduct = false;
      recipe.products.forEach(value => {
        // this.products.push({name: value.name});
        if(value.name.includes(this.productSelected)) matchedProduct = true;
      });
      return matchedProduct;
    } else {
      return true;
    }
  })
  .filter((recipe) => {
    if (this.mainIngredientSelected){
      let matchedIngredient = false;
      recipe.main_ingredient.forEach(value => {
        if(value.name.includes(this.mainIngredientSelected)) matchedIngredient = true;
      });
      return matchedIngredient;
    } else {
      return true;
    }
  });
  },
},
methods: {
  changeUrl(urlParam) {
    window.history.pushState(null, null, '?category=' + urlParam);
  },
  clearUrl() {
    let clean_uri = location.protocol + "//" + location.host + location.pathname;
    window.history.replaceState({}, document.title, clean_uri);
  },
},
mounted() {
  this.recipes = window.recipes;
  this.products = window.products;
  this.categories = window.categories;
  this.mainIngredients = window.mainIngredients;
},

 <div class="item-filter__filter" v-if="products.length">
            <div class="item-filter__select" :class="{ 'is-opened': productDropdown === true }"
                 @click="productDropdown = !productDropdown">
              <h6 class="item-filter__select-header">
                <span v-if="productSelected">{{ productSelected }}</span>
                <span v-if="!productSelected">{{ labels.products }}</span>
              </h6>
              <ul>
                <li v-for="product in products" v-model="products" :data-value="product.name" @click="productSelected = product.name">
                  {{ product.name }}
                </li>
              </ul>
            </div>
          </div>
        </

当我添加this.products.push（{name：value.name}）;在过滤器中，每当我选择一个类别时，它都会将这些产品不断添加到产品中，而不是在选择之后更新产品。我尝试通过“手表”获取产品的新值并更新产品列表。但是我不确定是否必须使用手表还是必须设置该产品阵列？任何逻辑或代码帮助将不胜感激。

如何根据Vue中的另一个下拉选择更改列表的值（状态）

0 个答案: