Laravel 5.7 - VUE Component - Свойство или метод "continent_selected" не определен в экземпляре, но на него ссылаются во время рендеринга - PullRequest
Новая
       8

Laravel 5.7 - VUE Component - Свойство или метод "continent_selected" не определен в экземпляре, но на него ссылаются во время рендеринга

0 голосов
/ 26 февраля 2019

Я получаю эту ошибку в компоненте Vue, который я разрабатываю в Laravel 5.7.
Можете ли вы сказать мне, что мне не хватает?

Это просто входная привязка continent_selected и country_selected , которая не работает, остальной код в порядке.

Свойство или метод «continent_selected» не определен в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что> это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Это мой код: 

<template>
    <div>
        <div class="form-group continent_id">    
            <select name="continent_id" v-model="continent_selected" id="continent_id" class="selectpicker" data-live-search="false" title="Pick a continent">
                <option v-if="continents.length>0" v-for="continent in continents" v-bind:value="continent.id">
                    {{ continent.name }}
                </option>
            </select>
        </div>

        <div class="form-group country_id">    
            <select name="country_id" v-model="country_selected" id="country_id" class="selectpicker" data-live-search="true" title="Pick a country">
                <option  v-for="(country, index) in countries" v-bind:value="country.id" >
                    {{ country.name }}
                </option>
            </select>
        </div>

        <span>Continent Selected: {{ continent_selected }}</span>
        <span>Country Selected: {{ country_selected }}</span>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.');
            this.loadData();
        },

        data() {
            return {
                continents: [],
                countries: [],
                continents_selected: '',
                country_selected: '',
            }
       },

       methods: {
            loadData: function() {
                axios.get('/api/continents')
                .then((response) => {
                    // handle success
                    this.continents = response.data.data;
this.getAllCountries(response.data.data);
                })
                .catch((error) => {
                    // handle error
                    console.log(error);
                })
                .then(() => {
                    // always executed
                });
            },
            getAllCountries: function(continents) {
                var j = 0;
                for (var i = 0, len = continents.length; i < len; i++) {
                    for (var key in continents[i].active_countries) {
                        this.countries[j] = {id: continents[i].active_countries[key], name: key};
                        j++;
                    }
                }
            }
        },
    }
</script>

1 Ответ

0 голосов
/ 26 февраля 2019

В вашем data() у вас есть continents_selected вместо continent_selected.Удалите символ S после континента, и он должен работать.

Ваше Vue пыталось использовать переменную, которая не существовала (из-за s), поэтому возникла эта ошибка.

...