Vue JS: Redefinir la valeur d'une propriété d'un composant sur un appel axios

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Voila je rencontre un petit problème avec mon code. J’ai crée un composant autocomplete, il fonctionnait bien avec une valeur en dur mais je cherche à le mettre à jour avec une requête axios

`
<script>
    import axios from 'axios';
 
    export default {
        name: 'autocomplete',
        props: {
            isAsync: {
                type: Boolean,
                required: false,
                default: false,
            },
        },
        data() {
            return {
                items: [],
                isOpen: false,
                results: [],
                search: '',
                isLoading: false,
                arrowCounter: 0,
            };
        },
        methods: {
            onChange() {
                // Let's warn the parent that a change was made
                this.$emit('input', this);
 
                // Is the data given by an outside ajax request?
                if (this.isAsync) {
                    this.filterResults();
                    this.isLoading = true;
                } else {
                    // Let's  our flat array
                    this.filterResults();
                    this.isOpen = true;
                }
            },
 
            filterResults() {
                // first uncapitalize all the things
                this.results = this.items.filter((item) => {
                    return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
                });
            },
            setResult(result) {
                this.search = result;
                this.isOpen = false;
            },
            onArrowDown(evt) {
                if (this.arrowCounter < this.results.length) {
                    this.arrowCounter = this.arrowCounter + 1;
                }
            },
            onArrowUp() {
                if (this.arrowCounter > 0) {
                    this.arrowCounter = this.arrowCounter -1;
                }
            },
            onEnter() {
                this.search = this.results[this.arrowCounter];
                this.isOpen = false;
                this.arrowCounter = -1;
            },
            handleClickOutside(evt) {
                if (!this.$el.contains(evt.target)) {
                    this.isOpen = false;
                    this.arrowCounter = -1;
                }
            }
        },
        watch: {
            items: function (val, oldValue) {
                // actually compare them
                if (val.length !== oldValue.length) {
                    this.results = val;
                    this.isLoading = false;
                }
            },
        },
        mounted() {
            document.addEventListener('click', this.handleClickOutside)
            axios.get(`http://jsonplaceholder.typicode.com/posts`)
                .then(function(response){
                    for (var i = 0; i < response.data.length; i++) {
                        console.log(this);
                        //this.items.push(response.data[i].title)
                    }
                })
        },
        destroyed() {
            document.removeEventListener('click', this.handleClickOutside)
        }
    };
</script>
 
<template>
    <div id="fake-input-block"  class="autocomplete" >
 
        <input
                id="fake-game-input"
                type="text"
                @input="onChange"
                v-model="search"
                @keydown.down="onArrowDown"
                @keydown.up="onArrowUp"
                @keydown.enter="onEnter"
                class="form-control"
 
        />
        <span>
            <a id="add-game" href="#" class="white" >Ajouter</a>
        </span>
 
        <ul
                id="autocomplete-results"
                v-show="isOpen"
                class="autocomplete-results"
                style="list-style-type: none;
                    background: #FFFFFF; color: #222222;"
 
        >
            <li
                    class="loading"
                    v-if="isLoading"
            >
                Loading results...
            </li>
            <li
                    v-else
                    v-for="(result, i) in results"
                    :key="i"
                    @click="setResult(result)"
                    class="autocomplete-result"
                    :class="{ 'is-active': i === arrowCounter }"
            >
                {{ result }}
            </li>
        </ul>
    </div>
</template>
`

mais le console.log sur la reponse axios ne me renvoit qu’un undefined alors que ce devrait être un tableau

merci d’avance

Édité par plop

+0 -0

Normalement il n’y a pas de raison pour que response soit null ou undefined. Par contre le console.log(this); devrait plutôt être un truc du genre console.log(response.data[i]);.

Et dans le then c’est « normal » que le this soit undefined ou un truc du genre car tu es en dehors du contexte du composant. Tu dois faire un truc du genre const self = this; juste avant ton appel axios est utiliser self à la place de this dans le then. Je sais pas si j’ai été clair.

Édité par Heziode

+0 -0
Auteur du sujet

J’y penserai Helmasaur

Effectivement Heziode tu as pointé le bon problème, je vais enquêter pour comprendre ce qui fait que dans le bloc then de la promesse tu n’as pas accès au this, en tout cas le fait est que ça marche nickel. Merci Heziode.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte