Как создать список избранного с Vue JS.Предоставление пользователю возможности выбрать максимальный 5 вариантов

Question

Прежде всего, я новичок в программировании и новичок в этом канале, поэтому извините, если структура моего вопроса не верна.Я могу предоставить более подробную информацию, если это необходимо.Заранее благодарю за помощь.

Контекст: у меня есть представление с несколькими вариантами (кнопками), где пользователь может выбрать до 5 из них.Как только пользователь выбирает пятую кнопку, все остальные кнопки должны быть отключены.Если пользователь снова нажимает на одну из выбранных кнопок, все остальные кнопки должны снова включиться.Как я могу реализовать эту логику?

Я использую vue js и vuetify.

Возможно, это не лучшее решение, но я, когда пользователь нажимает кнопку, я изменяю класс этой кнопки.так выглядит, как будто это было активно.Затем я подсчитываю количество кнопок, которые были нажаты, чтобы отключить остальные кнопки (это не работает).

 <v-layout>
      <v-flex row wrap>
        <v-card class="interests__content">
          <!-- looping through interests array -->
          <!-- with :class i'm binding classes to change the color of the buttons, with @click="increase()" i'm calling the increase method -->
          <v-tooltip color="primary" top v-for="interest in interests" :key="interest.name">
            <v-btn
              v-model="selected"
              flat
              slot="activator"
              :class="{blue:interest.checked, interest__btn: !interest.checked}"
              @click="increase(interest)"
              :disabled="disabled"
              :checked="checked"
            >{{interest.name}}</v-btn>

            <span>{{interest.name}}</span>
          </v-tooltip>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      checked: false,
      selected: "",
      count: 0,
      disabled: false,
      interests: [
        { name: "Interest1", checked: false },
        { name: "Interest2", checked: false },
        { name: "Interest3", checked: false },
        { name: "Interest4", checked: false },
        { name: "Interest5", checked: false },
        { name: "Interest6", checked: false },
        { name: "Interest7", checked: false },
        { name: "Interest8", checked: false },
        { name: "Interest9", checked: false },


      ]
    };
  },
  methods: {
    increase: function(interest) {
      this.count += 1;
      //changing the value of checked to add the blue class, with this class I add the background color to the button as if it was active.
      interest.checked = !interest.checked;

      if (this.count > 4) {
        this.disabled = !this.disabled;
      }
    },
    // I'm trying to check if the button has a class to implement the logic
    checkIfClass: function(interest) {
      interest.checked = !interest.checked;

      if (interest.classList.contains("blue"));
    }
  },
  computed: {}
};
</script>
<style scoped>
.interest__btn {
  font-family: Arial;
  font-size: 1em;
  background: white;
  color: #333333;
  border: 1px solid #0091da;
  text-transform: none;
}
.interest__btn:hover {
  color: black;
  background-color: rgba(172, 196, 221, 0.7);
}
.interests__content {
  padding: 1.7em;
}
.blue {
  background-color: #0091da;
  color: white !important;
  text-transform: none;
}
</style>

Answer 1

Я наконец-то нашел решение, в основном используя наблюдателя, чтобы узнать, когда счетчик больше 5, и добавив еще одну пару значений для обработки свойства disable: `

{{Interest.name}}

            <span>{{interest.name}}</span>
          </v-tooltip>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      selected: "",
      count: 0,
      disabled: false,
      interests: [
          { name: "Interest1", checked: false, disabled: false },
          { name: "Interest2", checked: false, disabled: false },
          { name: "Interest3", checked: false, disabled: false },
          { name: "Interest4", checked: false, disabled: false },
          { name: "Interest5", checked: false, disabled: false },
          { name: "Interest6", checked: false, disabled: false },
          { name: "Interest7", checked: false, disabled: false },

      ]
    };
  },
  methods: {
    increase: function(interest) {
      //changing the value of checked to add the blue class, with this class I add 
      the background color to the button as if it was active.
      interest.checked = !interest.checked;

      if (interest.checked) {
        this.count++;
      } else {
        this.count--;``
      }
    }
  },
  watch: {
    count: function(n, o) {
      if (this.count > 4) {
        for (let i = 0; i < this.interests.length; i++) {
         if (!this.interests[i].checked) {
            this.interests[i].disabled = true;
          } else {`
            this.interests[i].disabled = false;
          }
        }
      } else {
        for (let i = 0; i < this.interests.length; i++) {
          this.interests[i].disabled = false;
        }
      }
    }
  }
};
</script>
<style scoped>
.interest__btn {
  font-family: Arial;
  font-size: 1em;
  background: white;
  color: #333333;
  border: 1px solid #0091da;
  text-transform: none;
}
.interest__btn:hover {
  color: black;
  background-color: rgba(172, 196, 221, 0.7);
}
.interests__content {
  padding: 1.7em;
}
.blue {
  background-color: #0091da;
  color: white !important;
  text-transform: none;
}
</style>

Answer 2

Способ Vue сделать это состоит в том, чтобы иметь все состояние вашего приложения в js (ваш массив interests), а затем сделать все, что обрабатывает отображение этого состояния реагирующим .На практике это означает использование computed вместо methods для всего, что превращает состояние в пиксели на экране.

В старые времена нам пришлось бы перебирать interests для подсчета проверенного числа.В 2019 году мы будем использовать limit (), поэтому ...

computed:{
    numChecked(){
        return this.interests.reduce((acc,curr)=>acc += curr.checked?1:0,0)
    }
}

Тогда в вашем шаблоне ...

:disabled="(numChecked > 5 && !interest.checked)?'disabled':''"