vue.js 根据用户输入创建筛选器按钮

y53ybaqx 于 2023-11-21 发布在 Vue.js

关注(0)|答案(1)|浏览(126)

我一直在尝试根据用户创建的“标签”，以每个鸡尾酒配方的过滤器按钮.过滤器按钮显示，但当你点击他们什么也没发生.我已经有一个鸡尾酒的最爱过滤器，这工作正常.任何帮助将不胜感激！

<div id="below-nav">
      <div id="filter-and-sort-area">
        <div><b>Filter by:</b></div>
        <div class="line-break"></div>
        <div id="filter-and-sort-button-wrapper">
          <div class="filter-radio-toolbar">
            <!-- Favorite Filter -->
            <input type="radio" id="radio1" v-model="favoriteFilter" value="All" checked>
              <label for="radio1">Show All</label>
            <input type="radio" id="radio2" v-model="favoriteFilter" value="true">
              <label for="radio2">Favorites</label>
            <!-- Tag Filters -->
            <input type="radio" id="radio3" v-model="tag">
              <label v-for="(cocktail, index) in cocktails" :key="index" v-if="cocktail.tag !== null" for="radio3">
                {{ cocktail.tag }}
              </label>
          </div> 
        </div>
      </div>
    </div>

个字符
here's what the favorite and tag filters look like
下面是沙盒：https://codesandbox.io/s/vue-filters-from-user-input-9g95kg?file=/src/App.vue

vue.js

来源：https://stackoverflow.com/questions/77491887/create-filter-buttons-from-user-input

1条答案

按热度按时间

gtlvzcf81#

以下是我想做的更正：
v-for循环应该为每个过滤器创建1个输入和1个标签

<!-- Tag Filters -->
<template v-for="cocktail in cocktails">
  <span :key="cocktail.id" v-if="cocktail.tag">
    <input
      type="radio"
      :id="`radioFilter${cocktail.id}`"
      :value="cocktail.tag"
      v-model="tagFilter"
    />
    <label :for="`radioFilter${cocktail.id}`">
      {{ cocktail.tag }}
    </label>
  </span>
</template>

字符串
不建议在同一个元素上组合合并v-for和v-if，我将它们分别拆分为一个模板和一个span元素， Package 一个输入和标签。
这里纠正的另一个错误是每个标签需要一个唯一的“for”属性，这意味着每个输入需要一个唯一的“id”属性。这可以通过将template literal strings绑定到这些属性并使用一个唯一的值（如cocktail.id）来完成。
value属性也在无线电输入上丢失。我将其设置为cocktail.tag。
至于脚本代码，标记的数组过滤器只需要cocktail.tag和this.tagFilter之间的比较。

// tag filter
.filter((cocktail) => {
  if (this.tagFilter === "") {
    return cocktail;
  } else {
    return cocktail.tag === this.tagFilter;
  }
})

型
任何truthy值都可以从filter回调函数返回，所以在if语句中，你可以 * return this.cocktails，这和return true一样，但我个人更喜欢返回当前元素。
Updated codesandbox的

赞(0）回复(0）举报 2023-11-21

我来回答

vue.js 根据用户输入创建筛选器按钮

1条答案

相关问题

热门标签

最新问答