Javascript Vue.JS多复选框系列用于筛选应用程序

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

这是HTML

<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>

---

不要在每个阶段尝试

返回

，而是从一个

结果

变量开始，该变量是

实现的副本

，并在每个阶段修改它，然后在结束时返回：

       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;

       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;