JS VUE - Renderuje element z tablicy a potem wyświetla błąd, że tablica nie istnieje

pytanie zadane 2 czerwca 2019 w JavaScript przez Greeenone Pasjonat (16,100 p.)
zamknięte 2 czerwca 2019 przez Greeenone

Hej,

Mam taki dziwny problem. Mój komponent Vue wyświetla mi wybrany element z tablicy a zaraz po tym wyświetla błąd, że dany element nie jest zdefiniowany.

Template:

  <div v-if="settings">
    <span>{{ settings[0].setting_name }}</span>
  </div>

Skrypt

var axios = require("axios");
    export default {

        data(){

            return {

                setting:{
                    setting_name: ''
                },
                settings: [],
                uri: 'http://127.0.0.1:8000/api/general',
            }

        },

        methods: {
            loadSettings(){
                axios.get(this.uri).then(response=>{

                    this.settings = response.data.settings;

                });

            }

        },

        mounted() {
            this.loadSettings();
            console.log("component mounted");
        }
    }

[Vue warn]: Error in render: "TypeError: _vm.settings[0] is undefined"

found in

---> <GeneralComponent> at resources/js/components/GeneralComponent.vue
       <General> at resources/js/views/General.vue
         <App> at resources/js/views/App.vue
           <Root>


TypeError: "_vm.settings[0] is undefined"

Próbowałem też wyświetlić to z list v-for(Settings in settin) ale też nie pomogło :F

Ktoś wie jak temu zaradzić? Siedzę już na tym od dwóch godzin :F

komentarz zamknięcia: Rozwiązano !

3 odpowiedzi

odpowiedź 2 czerwca 2019 przez niezalogowany
wybrane 2 czerwca 2019 przez Greeenone

odpowiedź 2 czerwca 2019 przez AdamSiekierski Dyskutant (8,340 p.)

Masz to na GitHubie? Sprawdziłbym na innej maszynie, bo dla mnie ten kod wygląda jak najbardziej poprawnie.

komentarz 2 czerwca 2019 przez Greeenone Pasjonat (16,100 p.)

Hej

Kod działa. Pokazuje mi wybrany element z listy ale nie rozumiem czemu pojawia się właśnie owy błąd. Wydaje mi się, że może to być albo jakiś bug albo powodowane przez inny błąd

TypeError: parsed is undefinedapp.js:1232:7

Załączam więcej plików. Maszyna raczej odpada ponieważ strona jest cała "rozkopana". Na dodatek jeszcze do tego dochodzi laravel, ustawienie wszystko itd.

komentarz 2 czerwca 2019 przez AdamSiekierski Dyskutant (8,340 p.)

To raczej jakiś błąd, pochodzący z głębi node_modules :). Masz wszystkie biblioteki i vue-cli aktualne? Może trzeba je uaktualnić?

komentarz 2 czerwca 2019 przez Greeenone Pasjonat (16,100 p.)

Błąd pojawił się w momencie dodania axiosa. Wcześnie miałem błąd że axios nie jest zdefiniowany. Po dodaniu

  var axios = require("axios");

Zaczęło działać (Wyświetlać i pobierać dane z bazdy) ale pojawił się przy tym owym problem.

Spróbuję go rozwiązać tak jak pisał argeento i dam znać czy pomogło :)

komentarz 2 czerwca 2019 przez Greeenone Pasjonat (16,100 p.)

Naprawiłem poprzedni błąd i nadal mam ten sam błąd z settings

komentarz 2 czerwca 2019 przez Greeenone Pasjonat (16,100 p.)

Zamieszam screena

odpowiedź 2 czerwca 2019 przez Greeenone Pasjonat (16,100 p.)

Udało się rozwiązać problem

Rozwiązanie problemu:

I think that your array is populated after the object is accessed in your dom, so you can try it like this:

{{ items[4] && items[4].name }}