Ошибка типа: _this2.categoryOptions.find не является функцией

Question

Я пытаюсь создать опцию выбора, которая покажет категорию, когда она будет сохранена. У меня проблема в том, что я получаю эту ошибку в моей консоли

[Vue warn]: Ошибка при рендеринге: «TypeError: _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>

Answer 1

Заменить:

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

за

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

обратите внимание, что вы просто забыли заменить categoryOptions на выбран . Но чтобы убедиться, что компонент загружен, я советую вам сделать обязательным props categories и обеспечить его сохранение для компонента перед рендерингом.

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

Еще один совет, если вы используете Браузер chrome должен использовать очень интересное расширение, которое Vue. js devtools , чтобы следить за состоянием вашего приложения.