CODEWITHSUNDEEP
javascriptvue.js
kadirklc
kadirklc

Reputation: 19

Vuejs vuelidate array for object

I have a problem with the Vue vuelidate. Every time the boxes in the picture are pressed, an object is sent to an array. All boxes can be selected.

The condition is that a maximum of 3 boxes must be selected, if more than 3 are selected, I don't want to send the form.

Below is the code that runs when any box is pressed.

valueSelected(value,index) {
  // console.log(index)
  // console.log(value)
  const i = this.mySelectedValue.indexOf(value)
  // console.log('const i',i)
  if (i === -1) {
    this.mySelectedValue.push(value)
  } else {
    this.mySelectedValue.splice(i, 1)
  }
  const findIndex = this.user.positions.findIndex(v => {
    return v.position === value.position
  })

  if (findIndex === -1) {
    this.user.positions.push(value)
  } else {
    this.user.positions.splice(findIndex, 1)
  }
},

Upvotes: 0

Views: 104

Answers (1)

Codeaur
Codeaur

Reputation: 135

Considering this is the whole function you call. You can just put an if around it so if 3 options are already selected then it will not trigger. I think this is the easy way out.

valueSelected(value,index) {
  // console.log(index)
  // console.log(value)
  const i = this.mySelectedValue.indexOf(value)
  // console.log('const i',i)
  if (i === -1) {
    if(this.mySelectedValue.length < 3){
        this.mySelectedValue.push(value)
    }
  } else {
    this.mySelectedValue.splice(i, 1)
  }
  const findIndex = this.user.positions.findIndex(v => {
    return v.position === value.position
  })

  if (findIndex === -1) {
    if(this.user.positions.length < 3){
        this.user.positions.push(value)
    }
  } else {
    this.user.positions.splice(findIndex, 1)
  }
},

Upvotes: 1

Related Questions