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

尝试将选项初始化为空数组：[]

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

在控制台中，它说道具'options' expected array got undefined

this.options未分配的平均值。

试试这样：

在此。$ http请求之外创建变量。

let self = this;

然后替换：

this.options至self.options

这应该有用。

来自API的Vue多选选项

2 个答案: