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

我在当前项目中使用laravel和vuejs。当我要在我的组件中呈现数据时，它显示了我的数据，但在我的编辑器中有一个警告 我并不介意，因为它工作得非常好。我试图解决它，但我找不到解决办法。有人知道我该怎么做吗

这是味精

[vue/no-use-v-if-with-v-for]
“v-for”指令中的“rooms”变量应替换为返回筛选数组的计算属性。您不应将“v-for”与“v-if”混用。

`

提前谢谢

保留.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>

客人Id
{{guest.guest_id}-{{guest.first_name}{{guest.last_name}
房号
{{room.room_id}-{{room.status}

脚本如下：

<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>

导出默认值{
数据（）{
返回{
保留：{}，
嘉宾：{}，
房间：{}，
表格：新表格({
来宾id:“”，
房间号：''，
预订日期：''，
签入：“”，
请签出：“”，
人：“，
})
}
},
方法：{
getReservations（）{
axios.get（'api/reservation'）
.然后（（{data}）=>（this.reservations=data））
},
添加保留（）{
此.form.post（'api/预订'）
.然后（（）=>{
警报（“成功”）
})
},
getGuests（）{
axios.get（'api/guest'）
.then（（{data}）=>（this.guests=data））
},
会议室（）{
axios.get（'api/房间'）
.然后（（{data}）=>（this.rooms=data））
}
},
计算：{
},
创建（）{
这个是getRooms（）
这是getReservations（）
这个。getGuests（）
console.log（'组件已安装'）
}
}

您应该分离您的逻辑以不使用v-if-in-v-for，您可以在一个组合属性中这样做

{{room.room_id}-{{room.status}
数据（）{
返回
房间：[
{状态：'不可用'}，
{状态：'可用'}
]
}
},
计算：{
FilterDrooms:函数（）{
//将返回[{状态：'可用'}]
返回此.rooms.filter（room=>room.status！==“不可用”）
}
}

您应该分离您的逻辑以不使用v-if-in-v-for，您可以在一个组合属性中这样做

{{room.room_id}-{{room.status}
数据（）{
返回
房间：[
{状态：'不可用'}，
{状态：'可用'}
]
}
},
计算：{
FilterDrooms:函数（）{
//将返回[{状态：'可用'}]
返回此.rooms.filter（room=>room.status！==“不可用”）
}
}

替换此：

{{room.room_id}-{{room.status}

作者：

{{room.room_id}-{{room.status}

其中，

unavailableRooms

是一个计算属性，如：

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

就这样！现在，您的

脚本

部分执行逻辑，并且您的模板比以前更干净。

替换此部分：

{{room.room_id}-{{room.status}

作者：

{{room.room_id}-{{room.status}

其中，

unavailableRooms

是一个计算属性，如：

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

---

---

就这样！现在您的

脚本

部分执行逻辑，您的模板比以前更干净。

不工作，先生。它在render中得到一个错误：“TypeError:this.rooms.map不是函数”对不起，您应该使用过滤器。EditedStill getting error sir

[Vue warn]：渲染时出错：“TypeError:this.rooms.filter不是函数”

您的数据中应该有房间才能在

this.rooms

中使用，您如何获取

房间

信息？先生，这是什么意思？先生，我对你的问题感到困惑。它在render中得到一个错误：“TypeError:this.rooms.map不是函数”对不起，您应该使用过滤器。EditedStill getting error sir

[Vue warn]：渲染时出错：“TypeError:this.rooms.filter不是函数”

您的数据中应该有房间才能在

this.rooms

中使用，您如何获取

房间

信息？先生，这是什么意思？我对你的问题感到困惑这也给了我一个错误，先生，它不起作用

app.js:42280[Vue warn]：渲染中的错误：“TypeError:this.rooms.filter不是函数”

@Vince是你的数据对象中的房间吗？你从哪里从api获取房间，你能共享代码吗？没有类似

guests:[]

好的，先生，谢谢你。从现在开始，我将在数据中使用数组进行循环。：）这也给我带来了一个错误，先生，它不工作了。js:42280[Vue warn]：渲染中的错误：“TypeError:this.rooms.filter不是一个函数”@Vince是你的数据对象中的房间，如上所述？你从api哪里获取房间，你能共享代码吗？不，像

来宾：[]

好的，先生，谢谢你。从现在开始，我将在数据中使用数组进行循环。：）