[Vuejs]-How to create a favorite list with Vue js. Allowing the user to select maximun 5 options

by

0👍

The Vue way of doing this is to have all the state of your application in js (your interests array), then to make everything that handles the display of this state reactive. In practice this means using computed rather than methods for everything that turns state into pixels on screen.

In da old days, we would have looped through interests to count the number checked. In 2019 we’ll use reduce(), so…

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

Then in your template…

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

0👍

I finally came up with a solution, basically using a watcher to know when the counter was greater than 5 and adding another value-pair to handle the disable property:
`

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

Leave a comment