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>