[Vuejs]-Selecting primary and secondary options by clicking on images

by

0👍

Consider adding an additional parameter to each entry and use that to record your primary and secondary. 

options: [
  {
    id: 1,
    name: 'Chihuahua',
    size: 'Small',
    img: 'chi.jpg',
    slot: null
  },
  {
    id: 2,
    name: 'Yorkshire Terrior',
    size: 'Small',
    img: 'yorkie.jpg',
    slot: null
  },
  {
    id: 3,
    name: 'Mastiff',
    size: 'Large',
    img: 'mastiff.jpg',
    slot: null
  },
  {
    id: 4,
    name: 'Brittany Spaniel',
    size: 'Medium',
    img: 'brit.jpg',
    slot: null
  }
]

Then when you click on each option, your method can either populate that new parameter or set it back to null (to deselect).

methods: {
  toggle (option) {
    if (option.slot) { // turn it back off
      option.slot == null;
    } else {
      /* you'll want to pay closer attention to how you set 
         this in case they deactivate the primary after having
         set the secondary. This is just a quick and dirty way to 
         indicate primary vs secondary. */
      option.slot = this.slotsTaken()+1; 
    }
  }
}

You can then determine whether both slots have been taken with a computed property. 

computed: {
  slotsTaken () {
    return this.options.filter(option => slot != null).length;
  }
}

Modify things to suit your needs.

Leave a comment