Laravel TypeError:_this2.categoryOptions.find不是函数

我正在尝试创建一个选择选项，该选项将在保存类别时显示该类别。我遇到的问题是，我在控制台中遇到了这个错误

[Vue warn]：呈现时出错：“TypeError:\u this2.categoryOptions.find不是函数”

这是我的密码

<template>
    <div>
        <select class="form-control" v-model="addCategory" name="category">
            <option v-for="category in categoryOptions" :value="category.id">{{ category.name }}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['product', 'categories'],
        data() {
            return {
                addCategory: null,
                categoryOptions: []
            }
        },
        mounted() {

            axios.get('/admin/products/'+this.product.id+'/category').then((response) => {
                this.categoryOptions = response.data;
            });
        },
        computed: {
            categoryOptions(){
                let options = [];

                options.push({id:0, text: "Please select one"});

                let filteredCategory = this.categories.filter(category => {
                    return this.categoryOptions.find(selected => categoryOptions.category_id === category.id) == null;
                });

                filteredCategory.forEach(sc => {
                    options.push({id: sc.id, text: sc.name});
                });

                return options;
            }
        },
    }
</script>

{{category.name}
导出默认值{
道具：[“产品”、“类别”]，
数据（）{
返回{
addCategory:null，
类别选项：[]
}
},
安装的（）{
获取（'/admin/products/'+this.product.id+'/category'）。然后（（响应）=>{
this.categoryOptions=response.data；
});
},
计算：{
类别选项（）{
让期权=[]；
推送（{id:0，文本：“请选择一个”}）；
让filteredCategory=this.categories.filter（category=>{
返回此.categoryOptions.find（selected=>categoryOptions.category\u id===category.id==null；
});
filteredCategory.forEach（sc=>{
push（{id:sc.id，text:sc.name}）；
});
返回选项；
}
},
}

更换：

let filteredCategory = this.categories.filter(category => {
  return this.categoryOptions.find(selected => categoryOptions.category_id === category.id) == null;
});

请注意，您刚刚忘记将类别选项替换为选中的。但为了确保组件已加载，我建议您将

道具设置为必需的
类别
，并确保在渲染之前为组件保留这些道具

 <script>
    export default {
        props: {
           'product',
            'categories': {
               type: [Array, Object],
               required: true,
            },
        },
        ...
    }
</script>


导出默认值{
道具：{
“产品”，
“类别”：{
类型：[数组，对象]，
要求：正确，
},
},
...
}

如果您使用chrome浏览器，另一个技巧是使用一个非常酷的扩展来跟踪应用程序的状态

 <script>
    export default {
        props: {
           'product',
            'categories': {
               type: [Array, Object],
               required: true,
            },
        },
        ...
    }
</script>