Question

我在当前项目中使用laravel和vuejs。当我要在组件中渲染数据时，它显示了我的数据，但是在我的编辑器中有一个警告我真的不介意，因为它工作得很好。我试图解决它，但无法解决。有人知道我该怎么办？

这是警告消息。

[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'. `

谢谢！

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>

以下脚本：

<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

您应该将逻辑分开，以免在v-for中使用v-if，您可以在类似的专有属性中使用

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

Answer 2

替换此：

<option v-for="room in rooms" :key="room.room_id" v-if="room.status === 'Unavailable'">{{room.room_id}} - {{room.status}}</option>

通过：

<option v-for="room in unavailableRooms" :key="room.room_id">{{room.room_id}} - {{room.status}}</option>

unavailableRooms是一个计算属性，例如：

// other hooks
computed: {
  unavailableRooms() {
    return this.rooms.filter(room => room.status === 'Unavailable');
  },
},

就是这样！现在，您的script部分执行了逻辑，并且模板比以前更整洁了。

Vue.js v-for和v-if警告显示数据

2 个答案: