Question

所以这是我的问题，我想使用Vue.js对应用缩略图应用三个过滤器（之前从未使用过该框架）。它适用于第一个过滤器，但我不知道如何继续其他的过滤器。目标是只能从每个类别（平台，活动领域和设备）中选择一个复选框。

Screenshot of what it should look like. ("Toutes" meaning "All")

这是HTML

Unexpected token reader

这是脚本

<div id="filter-realisations">
          <div id="filter">
            <div class="filter_container">
              <h3>Filtrer</h3>
              <div class="filter">
                <p>Plateforme</p>
                <input type="radio" v-model="selectedPlatform" value="AllPlatform" id="AllPlatform"><label for="AllPlatform">Toutes</label>
                <input type="radio" v-model="selectedPlatform" value="iOS" id="iOS" /><label for="iOS">iOS</label>
                <input type="radio" v-model="selectedPlatform" value="Android" id="Android" /><label for="Android">Android</label>
              </div>
              <div class="filter">
                <p>Secteur</p>
                <input type="radio" v-model="selectedSecteur" value="AllSecteur" id="AllSecteur" /><label for="AllSecteur">Toutes</label>
                <input type="radio" v-model="selectedSecteur" value="grandPublic" id="grandPublic"/><label for="grandPublic">Grand public</label>
                <input type="radio" v-model="selectedSecteur" value="metier" id="metier" /><label for="metier">Métier</label>
                <input type="radio" v-model="selectedSecteur" value="marchesPublics" id="marchesPublics" /><label for="marchesPublics">Marchés Publics</label>

              </div>
              <div class="filter">
                <p>Device</p>
                <input type="radio" v-model="selectedDevice" value="AllDevice" id="AllDevice" /><label for="AllDevice">Toutes</label>
                <input type="radio" v-model="selectedDevice" value="Smartphone" id="Smartphone" /><label for="Smartphone">Smartphone</label>
                <input type="radio" v-model="selectedDevice" value="Tablet" id="Tablet" /><label for="Tablet"> Tablette</label>
                <input type="radio" v-model="selectedDevice" value="Watch" id="Watch" /><label for="Watch"> Montre connectée</label>

              </div>
            </div>

          </div>

          <div id="realisations">
            <div class="realisations_container">
              <div class="realisations_bloc" v-for="app in filteredRealisations" v-bind:key="app">
                <img v-bind:src='"img/realisations/"+app.name+".jpg"' alt="app.name">
                <div class="overlay">
                  <div class="app_description"><p>{{app.name}}</p></div>
                  <div class="platform_container">
                     <div class="device">
                      <img v-bind:src='"img/"+app.device+".svg"' alt="app.device"/>
                    </div>
                    <div class="os">
                      <img v-bind:src='"img/"+app.platform+".svg"'alt="app.platform"/>
                    </div></div>
                </div>
              </div>

            </div>
          </div>
        </div>

Answer 1

不是在每个阶段尝试return，而是从result变量开始，该变量是realisations的副本，并在每个阶段修改它，然后在最后返回：

       var result;

       if(platform === "AllPlatform") {
            result = vm.realisations;
        } else {
            result = vm.realisations.filter(function(app) {
                return app.platform === platform;
            });
        }

        if(secteur !== "AllSecteur") {
            result = result.filter(function(app) {
                return app.secteur === secteur;
            });
        }

        if(device !== "AllDevice") {
            result = result.filter(function(app) {
                return app.device === device;
            });
        }
        return result;

Vue.JS用于过滤应用的多个复选框系列

1 个答案: