I wish you a good day, I have a problem, every time the boxes in the picture are pressed, an object is sent to the array, but all boxes can be selected.

maximum 3 boxes must be selected, if more are selected, I want it not to send the form These codes are the function that works when the box is pressed.

enter image description here

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)
  }
},

CodePudding user response：

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)
  }
},