Vue

by kepo4ka

HTML

<div id="app">
  <h2>Выберите место:</h2>
  <button @click="random()">Выбраю случайное место</button>
  <ol>
    <li :class="{checked:place.checked, disabled:place.disabled}" v-for="(place, index) in places" @click="toggle(place)">{{index}}</li>
  </ol>

  <button :disabled="selected_seats_list.length<1">Отправить</button>
<hr>
<div>DEBUG selected_seats_list: {{selected_seats_list}}</div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

ol {
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

li.checked {
  background: purple;
  color: white;
}

li.disabled {
  cursor: default;
  opacity: 0.5;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

new Vue({
  el: "#app",
  data: {
    places: [
      { id: 0, checked: false, disabled: false, price: 120 },
      { id: 1, checked: false, disabled: false, price: 130 },
      { id: 2, checked: true,  disabled: true, price: 120 },
      { id: 3, checked: false, disabled: false, price: 120 },
      { id: 4, checked: false, disabled: false, price: 150 },
      { id: 5, checked: true,  disabled: true, price: 120 },
      { id: 6, checked: false, disabled: false, price: 220 },
      { id: 7, checked: false, disabled: false, price: 720 },
    ],
    selected_seats_list: []
  },
  
 watch: {
  places: {
  handler(val, oldVal)
  {
   this.selected_seats_list = [];
      this.places.map(place => {
        if (place.checked && !place.disabled) {
          this.selected_seats_list.push(place.id);
        }
      });
  },
  deep: true
  }
  }, 
  methods: {
  	toggle: function(place){
      if (!place.disabled) {
      	place.checked = !place.checked
      }
    },
    random: function ()
    {
    	let rnSelected =false;
      
      while (!rnSelected)
      {
      	let rnNumber = getRandom(0, 8);
        if (!this.places[rnNumber].checked && !this.places[rnNumber].disabled)
        {
        this.places[rnNumber].checked = true;
        rnSelected = true;
        }
        
      }
      
    }
  }
});


function getRandom(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}