如何使用 ajax 中的数据填充 vuetify select 框

Question

我正在尝试使用 ajax 调用中检索到的数据填充 vuetify select 框。我不确定如何使用此数据填充 select 框。 ajax 调用有效，我得到一个我设置为等于项目的对象数组。这是我试过的：

v-select

<v-select
:items="items"
item-text="test"
v-model="client"
label="Choose a Client"
class="input-group--focused"
item-value="text"
></v-select>

获取客户端函数

getClient: function (items) {
        axios.get('http://127.0.0.1:8000/client/')
        .then(function (response, items) {
            console.log(response.data);
            items  = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
    }
    }

调用函数

created() {
    this.getClient(this.items);

    }

Answer 1

参数通过引用（的值）传递，这就是为什么当您在 getClient 函数中 assign items 时，它不会影响this.items.

直接使用this.items：

created() {
    this.getClient();                                   // removed this.items
},
methods: {
    getClient: function () {                            // replaced `function (items) {` with `function () {`
            axios.get('http://127.0.0.1:8000/client/')
            .then((response) => {                       // replaced `function (response, items) {` with `(response) => {`
                console.log(response.data);
                this.items  = response.data;            // used `this.items = ` instead of `items = `
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }

重要：注意我替换了：

.then(function (response, items) {
    console.log(response.data);
    this.items = response.data;
})

有

.then((response) => {                // using arrow function now
    console.log(response.data);
    this.items = response.data;
})

这很重要，因为当您使用 function () { 时，this（在 this.items = response.data; 中） 不会指向 Vue 实例，但是当你使用箭头函数时它会起作用。

发生这种情况是因为每个 function () {} 都有自己的上下文（它自己的 this），可以将其设置为其他内容。箭头函数 otoh 继承其声明位置的上下文 (this)。在这种情况下，由于您是在方法内部声明它，因此 this 是 Vue 实例。使用箭头函数保留它。使用 function() 并不能保证它（this 可以设置为其他东西，这可能会发生）。

更多细节，我推荐MDN - Arrow Functions。

如何使用 ajax 中的数据填充 vuetify select 框

How to populate vuetify select box using data from ajax

javascript

vue.js

vuetify.js

v-select

获取客户端函数

调用函数

如何使用 ajax 中的数据填充 vuetify select 框

How to populate vuetify select box using data from ajax

javascript

vue.js

vuetify.js

v-select

获取客户​​端函数

调用函数

获取客户端函数