Vue - Очистить истинные ложные переключатели с внешней стороны цикла - PullRequest
Новая
       13

Vue - Очистить истинные ложные переключатели с внешней стороны цикла

0 голосов
/ 07 мая 2019

Я относительно новичок в Vus.js и vanilla js, мне нужна помощь. У меня есть цикл, где фильтры переключаются между false и true в зависимости от критериев. У меня есть кнопка вне всех циклов vue, которую я хотел бы использовать для очистки всех переключателей - установите все данные обратно в false.

Я использую axios и файл json для своих данных. Есть три файла, которые я работаю с filters.json, filters.js и html

Заранее спасибо за помощь * 1005 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>

1 Ответ

0 голосов
/ 08 мая 2019

Я получил исправление для этого 

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