我無法使用 select 選項顯示 json (Laravel Vue)

Question

我想在帶有 province_id 和 province 的選項中顯示值。 但在選項中它總是以 JSON 格式出現。 請幫助我，我卡住了

這是我的 create.js

 changeShippingCountry(country) {
        this.$set(this.form.shipping, 'country', country);

        this.fetchStates(country, (states) => {
            this.$set(this.states, 'shipping', states);
            this.$set(this.form.shipping, 'state', '');
        });
    },

    fetchStates(country, callback) {
        $.ajax({
            method: 'GET',
            url: route('provinces'),
            dataType: "json",
        }).then(callback);
    },

和這個 billing_detail.blade.php

<input
                        type="text"
                        name="billing[state]"
                        :value="form.billing.state"
                        id="billing-state"
                        class="form-control"
                        v-if="! hasBillingStates"
                        @change="changeBillingState($event.target.value)"
                    >

                    <select
                        name="billing[state]"
                        v-model="form.billing.state"
                        id="billing-state"
                        class="form-control arrow-black"
                        v-else
                    >
                        <option value="">{{ trans('storefront::checkout.please_select') }}</option>

                        <option
                            v-for="(name, code) in states.billing"
                            :value="code"
                            v-text="name"
                        >
                        </option>
                    </select>

這是選項的結果

Answer 1

我看不到您的后端數據是如何在 PHP 中提供的，但我在這里假設states.billing是一個對象數組，每個 object 都包含元素province_id和province 。

在vue 文檔中，您可以讀到放在 v-for 循環前面括號之間的第二個 arguments 不同，這取決於您的v-for是在數組上循環還是在 object 上循環。

如果它是一個array ，文檔顯示：

v-for 還支持可選的第二個參數作為當前項的索引。

如果它是object ，則文檔顯示為：

您還可以為屬性名稱（又名鍵）提供第二個參數

考慮到您正在遍歷一個（對象的）數組，您可能應該將v-for循環更新為如下所示：

<option
  v-for="(item, index) in states.billing"
  :value="item.province_id"
  :key="index"
>
  {{ item.province }}
</option>

請注意，我在這里使用索引作為鍵屬性。 如果您的 province_id 是唯一的，您還可以執行以下操作：

<option
  v-for="item in states.billing"
  :value="item.province_id"
  :key="item.province_id"
>
  {{ item.province }}
</option>