Bonjour,

Voila je rencontre un petit problème avec mon code :)

J'utilise VueJs 2 et le plugin de Bootstrap pour vue-JS

Ce que je veux

J'essaye de créer dynamiquement un élément.
Je dois boucler sur le nombre d'éléments à créer, je fais donc ceci :

        <b-col md="6" class="my-1">
            <p> Nombre d'élément de la recherche {{ items.length}}</p>
            <b-form-group horizontal :label="filtre.label" class="mb-0" v-for="filtre in filters">
                <b-input-group>
                    <b-form-input v-model="filtre.name" @input="searchData(filtre.name)"
                                  placeholder="Type to Search"/>
                    <b-input-group-append>
                        <b-btn :disabled="!filtre.name" @click="filtre.name = ''">Clear</b-btn>
                    </b-input-group-append>
                </b-input-group>
            </b-form-group>
        </b-col>

Ce que j'obtiens

Quand je fais mes boucles, je n'ai pas de problème sauf pour le v-model :

                    <b-form-input v-model="filtre.name" @input="searchData(filtre.name)"
                                  placeholder="Type to Search"/>
                    <b-input-group-append>

En image quand je fais F5 sur la page :

Ce que je voudrais c'est ça :

le v-model genère automatiquement une "value" dans l'input lorsque je fais un v-for.
Si je rentre ça à la main, j'ai bien le placeHolder d'écris et la Value vide (sans valeur)

Savez vous comment je peux faire ?

Voici mon code en entier :

<template>
    <div>
        <div v-if="loading" class="loader"></div>

        <b-col md="6" class="my-1">
            <p> Nombre d'élément de la recherche {{ items.length}}</p>
            <b-form-group horizontal :label="filtre.label" class="mb-0" v-for="filtre in filters">
                <b-input-group>
                    <b-form-input v-model="filtre.name" @input="searchData(filtre.name)"
                                  placeholder="Type to Search"/>
                    <b-input-group-append>
                        <b-btn :disabled="!filtre.name" @click="filtre.name = ''">Clear</b-btn>
                    </b-input-group-append>
                </b-input-group>
            </b-form-group>
        </b-col>
        <b-table v-show="!loading"
                 :sort-by.sync="sortBy"
                 :sort-desc.sync="sortDesc"
                 :items="items"
                 :fields="fields"
                 :no-sort-reset="true">
        </b-table>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                users: [],
                sortBy: 'age',
                sortDesc: false,
                filters: [
                    {name: 'filter', id: 1, label: 'Filtre Id'},
                    {name: 'filter_userName', id: 2, label: 'Filtre Nom'} ],
                fields: [
                    {key: 'id_utilisateur', sortable: true},
                    {key: 'nom_utilisateur', sortable: true},
                    {key: 'email', sortable: true},
                    {key: 'isActive', sortable: false}
                ],
                items: [],
                loading: false,
                message: ''
            }
        },
        mounted() {

        },
        methods: {
            searchData(nameInFilter) {

                this.items = []
                this.loading = true
                if (this.filters[0].name.length > 0) {
                    this.$http.post('http://localhost:9090/test/phpAPI/', {
                        searchUser: 'searchUser',
                        name: nameInFilter
                    }, {emulateJSON: true})
                        .then(response => {
                            console.log('success', response)
                            if (response.data !== 'false') {
                                this.items = response.data
                            }

                            else {
                                this.items = []
                            }

                        }, response => {
                            console.log('erreur', response)
                        }).then(_ => {
                        this.loading = false
                    });
                } else {
                    this.items = []
                    this.loading = false
                }
            },
            searchId(id) {
                this.items = []
                this.loading = true
                if (this.filter.length > 0) {
                    this.$http.post('http://localhost:9090/test/phpAPI/', {
                        id: id
                    }, {emulateJSON: true})
                        .then(response => {
                            console.log('success', response)
                            if (response.data !== 'false') {
                                this.items = response.data
                            }

                            else {
                                this.items = []
                            }

                        }, response => {
                            console.log('erreur', response)
                        }).then(_ => {
                        this.loading = false
                    });
                } else {
                    this.items = []
                    this.loading = false
                }
            }
        },
        computed: {

        }
    }
</script>

<style scoped>
    .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

1 réponse


Bob456
Auteur

Merci,

ça fonctionne. :)
J'ai eu du mal en codant (débutant VueJs et Js) à associer le nom de la variable et la valeur de la variable dans le v-model.
chaque Objet à un ID que l'on voit pas ?