title: Vuejs v-for and v-if warning when showing data
body: <p>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?</p>
  
  <p>Here is the warining msg. </p>
  
  <p><code>[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'.</code>
  `</p>
  
  <p>Thanks in advance!</p>
  
  <p>Reservations.vue</p>
  
  <pre><code>    &lt;div class="tab-pane" id="tab_2"&gt;
                          &lt;form @submit.prevent="login" @keydown="form.onKeydown($event)"&gt;
  
  
                                  &lt;div class="form-group"&gt;
                                  &lt;label&gt;Guest Id&lt;/label&gt;
                                  &lt;select class="form-control"&gt;
                                      &lt;option v-for="guest in guests" :key="guest.guest_id"&gt;{{guest.guest_id}} - {{guest.first_name}} {{guest.last_name}}&lt;/option&gt;
                                  &lt;/select&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="form-group"&gt;
                                  &lt;label&gt;Room Id&lt;/label&gt;
                                  &lt;select class="form-control" &gt;
                                      &lt;option v-for="room in rooms" :key="room.room_id" v-if="room.status === 'Unavailable'"&gt;{{room.room_id}} - {{room.status}}&lt;/option&gt;
                                  &lt;/select&gt;
                                  &lt;/div&gt;
  
  
                              &lt;/form&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>the script below:</p>
  
  <pre><code>&lt;script&gt;
      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}) =&gt; (this.reservations = data))
            },
            addReservations(){
                this.form.post('api/reservation')
                  .then(()=&gt;{
                      alert('success')
                  })
            },
            getGuests(){
                axios.get('api/guest')
                  .then(({data}) =&gt; (this.guests = data))
            },
             getRooms(){
                axios.get('api/room')
                  .then(({data}) =&gt; (this.rooms = data))
            }
        },
        computed: {
  
        },
          created() {
              this.getRooms()
              this.getReservations()
              this.getGuests()
              console.log('Component mounted.')
          }
      }
  &lt;/script&gt;
  </code></pre>