web-dev-qa-db-fra.com

Remplissez une liste déroulante dans Vue.js à partir d'un appel ajax

Je veux pouvoir faire un appel ajax et utiliser les résultats retournés pour générer les options d'une liste déroulante en utilisant vue.js . Je peux le faire:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

fichier .js

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Mais je ne veux pas que mes options soient codées en dur, mais plutôt provenir de l'appel ajax.

L'appel Ajax ressemble à ceci:

function pullEmployees(){
        var eventOwnerId = $('#eventOwner').val();
        var eventOwnerName = $('#eventOwner :selected').text();
        $.ajax({
            url: "employees.cfm",
            data: {
                eventOwnerId: eventOwnerId,
                eventOwnerName: eventOwnerName,
                method : "updateOwners"
            },

            success: function(results) {
              // results will have a list of objects where each objects has     two properties (ID and Value)
            }
    });
}

Je suis vraiment nouveau dans vue.js et j'apprécierais que quelqu'un puisse aider.

javascriptvue.jsvue-component
11
DoArNa

Dans l'exemple ci-dessous, je simule votre appel ajax avec un setTimeout. Fondamentalement, vous voulez capturer le résultat de new Vue() dans une variable, puis définissez la propriété options de cette Vue avec les résultats de votre appel ajax.

J'ai également mis à jour votre modèle pour refléter le fait que les options que vous renvoyez ont la structure {ID, text}.

console.clear()

let app = new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: []
  }
})


function pullEmployees(){
  let options = [
    { text: 'One', ID: 'A' },
    { text: 'Two', ID: 'B' },
    { text: 'Three', ID: 'C' }
  ];
  setTimeout(() => app.options = options, 1000)
}
pullEmployees()
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.ID">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

Cependant, tout cela peut être fait dans Vue. Cela n'a pas besoin d'être fait à l'extérieur.

let app = new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: []
  },
  methods:{
    pullEmployees(){
      var eventOwnerId = $('#eventOwner').val();
      var eventOwnerName = $('#eventOwner :selected').text();
      $.ajax({
        url: "employees.cfm",
        data: {
          eventOwnerId: eventOwnerId,
          eventOwnerName: eventOwnerName,
          method : "updateOwners"
        },
        success: results => this.options = results
      });
    }
  },
  mounted(){
    this.pullEmployees()
  }
})

Si eventOwner fait partie de Vue, vous pouvez également obtenir cette valeur en tant que propriété de données de Vue.

9
Bert

Stockez votre vue instance comme une variable:

var vue = new Vue(// stuff...);

puis pour l'Ajax soyez prudent sur la portée de this:

function pullEmployees(){
        var _this = this; // bind "this" to local var
        var eventOwnerId = $('#eventOwner').val();
        var eventOwnerName = $('#eventOwner :selected').text();
        $.ajax({
            url: "employees.cfm",
            data: {
                eventOwnerId: eventOwnerId,
                eventOwnerName: eventOwnerName,
                method : "updateOwners"
            },

            success: function(results) {
              _this.vue.data.options = results; // set data
            }
    });
}
2
frozen