Vue multiselect options из API

Question

Я использую vue multiselect, и мне нужны мои опции, чтобы перейти от api. Когда я использую этот пример из официальных документов, он работает.

import Multiselect from 'vue-multiselect' 

export default { 
    components: { 
    Multiselect 
    }, 
    data() { 
    return { 
     value: [ 
     { name: 'Vue.js', language: 'JavaScript' } 
     ], 
     options: [ 
     { name: 'Vue.js', language: 'JavaScript' }, 
     { name: 'Adonis', language: 'JavaScript' }, 
     { name: 'Rails', language: 'Ruby' }, 
     { name: 'Sinatra', language: 'Ruby' }, 
     { name: 'Laravel', language: 'PHP' }, 
     { name: 'Phoenix', language: 'Elixir' } 
     ] 
    } 
    } 
} 

Но если я заменю варианты с моими данными он не

data: function() { 
      return { 
       value: [], 
       options: this.users 
      } 
     }, 
methods: { 
     getUsers: function() { 
      this.$http.get('/api/get/users').then(function (response) { 
        this.users = response.data; 
        this.updateUsers(); 
        console.log(this.users) 
       }, function (response) { 
        console.log(response) 
       }); 
      }, 
      updateUsers: function() { 
       this.options = this.users; 
      } 
     }, 
     created: function() { 
      this.getUsers(); 
     } 
    }; 

Я пытался вызвать метод с mounted, beforeMount и beforeCreate и ни один из них не работают. Моя консоль показывает следующие ошибки:

Я уверен, что проблема с тем, как я передаю варианты, но я не знаю, как передать им правильный путь.

Для шаблона я просто используя по умолчанию сейчас:

<div> 
     <label class="typo__label">Simple select/dropdown</label> 
     <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" placeholder="Pick some" label="name" track-by="name"></multiselect> 
     <pre class="language-json"><code>{{ value }}</code></pre> 
    </div> 

Answer 1

Try инициализации параметров, как пустой массив: []

data: function() { 
     return { 
      value: [], 
      options: [] 
     } 
    }, 

Позже, когда вы получаете данные из внутреннего интерфейса, вы могут заполнять данные в опциях, как указано ниже:

methods: { 
    getUsers: function() { 
     this.$http.get('/api/get/users').then(response => { 
       this.options = response.data; 

       console.log(this.users) 
      }, function (response) { 
       console.log(response) 
      }); 
     }, 

Answer 2

В консоли сказано, что prop 'options' expected array got undefined

среднее значение до this.options не назначается.

Попробуйте так:

создать переменную вне этого $ HTTP запрос..

let self = this; 

замените:

this.options в self.options

Это должно работать.