ajaxからのデータを使用してvuetify選択ボックスにデータを入力する方法

debugcn 投稿 Dev

テイラー

ajax呼び出しで取得したデータを使用して、vuetify選択ボックスにデータを入力しようとしています。このデータを使用して選択ボックスにデータを入力する方法がわかりません。ajax呼び出しは機能し、アイテムと同じように設定したオブジェクトの配列を取得します。これは私が試したことです：

v-選択

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

    }

acdcjunior

引数は参照（の値）によって渡されます。そのため、関数内で割り当てる ときに、に影響を与えません。itemsgetClientthis.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;
})

を使用する場合、this（in this.items = response.data;）はVueインスタンスを指さないfunction () {ため、これは重要ですが、矢印関数を使用する場合は指します。

これは、それぞれfunction () {}に独自のコンテキスト（独自のthis）があり、それを別のコンテキストに設定できるために発生します。矢印関数otohは、this宣言された場所のコンテキスト（）を継承します。この場合、メソッド内で宣言しているので、thisはVueインスタンスです。矢印関数を使用すると、それが維持されます。を使用しても、それがfunction()保証されるわけではありません（thisおそらく、他の何かに設定される可能性があります）。

詳細については、MDN-矢印関数をお勧めします。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-9

コメントを追加

サインイン

分類Dev

Related 関連記事

記事