sélectionner le premier résultat de chaque liste avec vue js

Par sylvain, il y a 7 ans

Javascript

Bonjour,

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

Ce que je fais

je me suis inspiré de ce code
https://itsolutionstuff.com/post/dynamic-dependent-dropdown-using-vuejs-and-phpexample.html
mais je veux afficher par defaut toute les listes et preselectionner le premier de chaque liste.

j'ai testé ces deux solutions sans success
https://codepen.io/getreworked/pen/wpwVdE?editors=1010

// coté html <select class='form-control' v-model='country' @change='getStates()'> <option value='0' >Select Country</option> <option v-for='data in countries' :value='data.id'>{{ data.name }} :selected="index === 0"</option> </select> // le script <script type="text/javascript"> var app = new Vue({ el: '#myApp', data: { country: 0, countries: '', state: 0, states: '', city: 0, cities: '' }, methods: { getCountries: function(){ axios.get('ajaxpro.php', { params: { request: 'country' } }) .then(function (response) { app.countries = response.data; //app.states = ''; //app.cities = ''; //app.state = 0; //app.city = 0; }); }, created: function(){ this.getCountries(); } }); </script>

Ce que je veux

Je veux preselectionner le premier resultat pour la select box , au lieu de laisser a "select country" ou autres...

Ce que j'obtiens

j'obtiens rien.

8 réponses

sylvain, il y a 7 ans

Le probleme c'est que je ne connais pas a l'avance le premier de la liste. il faut qu'il selectionne le premier qui se presente

olive140, il y a 7 ans

Bonjour,
Merci de nous montrer ton code.

Lartak, il y a 7 ans

Bonsoir.
@olive40: Si tu regardes bien dans le contenu de son sujet et plus précisément dans :

Ce que je fais

Il a justement joint deux liens concernant deux codes qu'il a essayé.

olive140, il y a 7 ans

Les deux codes marchent !! la selection de l'élément 0 d'un array.
D'où ma demande.

sylvain, il y a 7 ans

j'ai ajouté le code, selon mon hypothese, les scripts marchent, parce que le tableau est statique . mais dans mon cas, ils provient d'un appel ajax.

olive140, il y a 7 ans

Ton code fonctionne mais tu selectionnes dans ton v-model country: 0 qui correspond à la value de Select Country.
Mets l'id d'un pays comme valeur pour country et il sera sélectionné.

sylvain, il y a 7 ans

un exemple ? @olive140

olive140, il y a 7 ans

Essaye comme ça

methods: { getCountries: function(){ axios.get('ajaxpro.php', { params: { request: 'country' } }) .then(function (response) { app.countries = response.data; app.country = app.countries[0].id }); },