Impossible de redefinir une propriété sur un appel ajax


#1

Bonjour,

Voila je rencontre un petit problème avec mon code.

<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>

<style>
    .autocomplete {
        position: relative;
    }

    .autocomplete-results {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid #eeeeee;
        height: 120px;
        overflow: auto;
        width: 100%;
    }

    .autocomplete-result {
        list-style: none;
        text-align: left;
        padding: 4px 2px;
        cursor: pointer;
    }

    .autocomplete-result.is-active,
    .autocomplete-result:hover {
        background-color: #4AAE9B;
        color: white;
    }

</style>

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


#2

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 quand on fait un const that = this avant l’appel axios et qu’on travaille sur ce that


#3

c’est le function qui “redéfini” le this dans .then(function(response){

tu peux utiliser une fat arrow qui ne change pas le scope de this : .then(response => {