Vuejs v-for and v-if warning when showing data

Question

Im using laravel and vuejs in my current project. When I was going to render the data in my component, It shows my data but in my editor there is a warning and I dont mind it really because it works perfectly fine. I tried to fix it but I cant get the solution. Someone know what should I do?

Here is the warining msg.

[vue/no-use-v-if-with-v-for] The 'rooms' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'. `

Thanks in advance!

Reservations.vue

    <div class="tab-pane" id="tab_2">
                        <form @submit.prevent="login" @keydown="form.onKeydown($event)">


                                <div class="form-group">
                                <label>Guest Id</label>
                                <select class="form-control">
                                    <option v-for="guest in guests" :key="guest.guest_id">{{guest.guest_id}} - {{guest.first_name}} {{guest.last_name}}</option>
                                </select>
                                </div>

                                <div class="form-group">
                                <label>Room Id</label>
                                <select class="form-control" >
                                    <option v-for="room in rooms" :key="room.room_id" v-if="room.status === 'Unavailable'">{{room.room_id}} - {{room.status}}</option>
                                </select>
                                </div>


                            </form>
                    </div>

the script below:

<script>
    export default {
      data(){
        return {
            reservations: {},
            guests: {},
            rooms: {},
            form: new Form ({
                guest_id: '',
                room_id: '',
                reservation_date: '',
                check_in:'',
                check_out: '',
                persons: '',
            })
        }
      },
      methods:{
          getReservations(){
              axios.get('api/reservation')
                .then(({data}) => (this.reservations = data))
          },
          addReservations(){
              this.form.post('api/reservation')
                .then(()=>{
                    alert('success')
                })
          },
          getGuests(){
              axios.get('api/guest')
                .then(({data}) => (this.guests = data))
          },
           getRooms(){
              axios.get('api/room')
                .then(({data}) => (this.rooms = data))
          }
      },
      computed: {

      },
        created() {
            this.getRooms()
            this.getReservations()
            this.getGuests()
            console.log('Component mounted.')
        }
    }
</script>

Answer 1

You should separate your logic to not use v-if inside v-for, you can do it in a compoted propery like

<select class="form-control" >
   <option v-for="room in filteredRooms" :key="room.room_id">
      {{room.room_id}} - {{room.status}}
   </option>
</select>

data(){
  return 
     rooms:[
       {status: 'Unavailable'},
       {status: 'Available'}
     ]
  }
},

computed: {
  filteredRooms: function () {
   // will return [{status: 'Available'}]
    return this.rooms.filter(room => room.status !== 'Unavailable')
  }
}