Question

显示数据时 Vuejs v-for 和 v-if 发出警告

2019-08-28

1662

laravel vue.js vuejs2 v-for

我在当前项目中使用 laravel 和 vuejs。当我要渲染组件中的数据时，它会显示我的数据，但在我的编辑器中会出现警告我并不介意，因为它运行得很好。我试图修复它，但我找不到解决方案。有人知道我该怎么办吗？

这是警告消息。

[vue/no-use-v-if-with-v-for] “v-for”指令内的“rooms”变量应该替换为返回过滤数组的计算属性。您不应将“v-for”与“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')
  }
}

的 compoted 属性中执行此操作

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 部分执行逻辑，并且您的模板比以前更简洁。