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

sylvain
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

olive140
Réponse acceptée

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
      });

    },
olive140

Bonjour,
Merci de nous montrer ton code.

Lartak

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

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

sylvain
Auteur

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

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
Auteur

un exemple ? @olive140

sylvain
Auteur

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