Question

我对Vus.js和vanilla js比较陌生，我正在寻求帮助。我有一个循环，其中过滤器根据条件在false和true之间切换。我想在所有Vue循环之外使用一个按钮来清除所有切换-将所有数据重新设置为false。

我正在使用axios和一个json文件存储我的数据。 Theere是我正在使用filters.json，filters.js和html

的三个文件

预先感谢您的帮助 json

[{
    "name": "Category",
    "filterVisible": false,
    "buttonActive": false,
    "values": [{
        "name": "Single Cask",
        "selected": false
      },
      {
        "name": "Regional Malt",
        "selected": false
      },
      {
        "name": "New releases",
        "selected": false
      }
    ]
  },

  {
    "name": "Region",
    "filterVisible": false,
    "buttonActive": false,
    "values": [{
        "name": "Highland",
        "selected": false
      },
      {
        "name": "Speyside",
        "selected": false
      },
      {
        "name": "Islay",
        "selected": false
      }
    ]
  },

  {
    "name": "Brand",
    "filterVisible": false,
    "buttonActive": false,
    "values": [{
        "name": "Regional Malts",
        "selected": false
      },
      {
        "name": "Single Casks",
        "selected": false
      },
      {
        "name": "The Big Yin",
        "selected": false
      },
      {
        "name": "The Wee Yin",
        "selected": false
      }
    ]
  },

  {
    "name": "Price",
    "filterVisible": false,
    "buttonActive": false,
    "values": [{
        "name": "£1-50",
        "selected": false
      },
      {
        "name": "£51-100",
        "selected": false
      }
    ]
  }
]

fliters.js

var vm = new Vue({
  el: '#app',
  data: {

    shopFilters: []
  },

  created() {

  axios
    .get(`shopFilters.json`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.shopFilters = response.data;
    })
},
  computed: {



  }, // end computed

  methods: {
    // my attempt at clearing filter
    clearAll: function(filter) {
     shopFilters.filterVisible = false
   }
  }

});

html

<div class="shop__filter">
  <div class="shop__filter-header">
    <h6 class="shop__filter-heading"><img src="img/filter-symbol.png" />Filter</h6>
    <p class="shop__filter-showing">showing 1-8 of 120</p>

**this is the bit I want to call the Function on**

    <button  @click="clearAll()" class="btn btn-white btn-mobile">clear filters</button>



  </div>
  <form>

    <dl class="shop__filter-list">

      <template v-for="filter in shopFilters">

        <dt class="shop__filter-dt">
          <button class="shop__btn-type"
          v-on:click="filter.buttonActive = !filter.buttonActive"
          :class="{'active' : filter.buttonActive}"
          @click="toggle(filter)"
          @click.self.prevent>
            {{ filter.name }}
          </button>
        </dt>

        <dd class="shop__filter-dd"
          v-show="filter.filterVisible || option.selected"
          :id="filter.name"
          v-for="option in filter.values">

          <button class="shop__btn-filter"
            @click.self.prevent
            v-on:click="option.selected = !option.selected"
            :class="{'active' : option.selected}">
              {{ option.name }}
          </button>
        </dd>

      </template>

    </dl>
  </form>
</div>

Answer 1

我已解决此问题

clearAll: function() {
  for (var i = 0; i < this.shopFilters.length; i++) {
    var filter = this.shopFilters[i];
    filter.buttonActive = false;
    filter.filterVisible = false;
    for (var j = 0; j < filter.values.length; j++) {
      var option = filter.values[j];
      option.selected = false;
    }
  }
}, // end clearAll

Vue-从循环外部清除true true false切换

1 个答案: