如何使用來自LaravelAPI的專案填充此Vue選擇？

我正在撰寫一個由Laravel 8 API和Vue 3前端組成的注冊表單。

我在AuthController中有這段代碼來注冊一個新用戶：

class AuthController extends Controller
{

    public function register(Request $request) {

     $rules = [
        'first_name' => 'required|string',
        'last_name' => 'required|string',
        'email' => 'required|email|unique:users,email',
        'password' => 'required|string|confirmed',
        'country' => 'required|string',
        'accept' => 'accepted',
    ]; 

    $fields = $request->validate($rules);

    $user = User::create([
        'first_name' => $fields['first_name'],
        'last_name' => $fields['last_name'],
        'email' => $fields['email'],
        'password' => bcrypt($fields['password']),
        'country' => $fields['country']
    ]);

    $token = $user->createToken('secret-token')->plainTextToken;

    $response = [
        'user' => $user,
        'token' => $token
    ];

    return response($response, 201);
    }
}

在前端，我有：

const registrationForm = {
  data() {
    return {
      apiUrl: 'http://myapp.test/api',
      formSubmitted: false,
      countries: [],
      fields: {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        country: '',
      },
      errors: {},
    };
  },
  methods: {
    // get Countries
    async getCountries(){
      try {
        const response = await axios
          .get(`${this.apiUrl}/register`)
          .catch((error) => {
            console.log(error);
          });

        // Populate countries array
        this.countries = response.data;

      } catch (error) {
        console.log(error);
      }
    },

    registerUser(){
      // Do Registrarion
      axios.post(`${this.apiUrl}/register`, this.fields).then(() =>{
        // Show success message
        this.formSubmitted = true;

        // Clear the fields
        this.fields = {}

      }).catch((error) =>{
        if (error.response.status == 422) {
          this.errors = error.response.data.errors;
        }
      });
    }
  },
  async created() {
    await this.getCountries();
  }
};

Vue.createApp(registrationForm).mount("#myForm");

目標

為了用國家下拉串列替換“國家”表單欄位，我在register()方法上方添加了這個：

public $countries;

public function countries()
{
  return Country::all('id', name', 'code');
}

$rules此外，陣列上方的這一行：

$this->countries = $this->countries();

問題

這是一個 API，我沒有視圖，所以我不能這樣做：

return view('regisrer-view', compact('countries'));

和

<select class="form-select">
  @foreach ($countries as $country)
      <option value="{{$country->id}}">{{$country->name}}</option>
  @endforeach
</select>

相反，我需要API 中的國家/地區串列，因此我可以以 Vue 形式輸出，如下所示：

<select class="form-control">
    <option value="">Select your country</option>
    <option v-for="country in countries" :value="country.id">{{ country.name }}</option>
</select>

問題

如何使用（串列）國家/地區填充上面的 Vue 選擇？

日期

我在后端做了這個：

public function countries()
{
    return Country::all('id', 'name', 'code');
}

和

$response = [
    'countries' => $this->countries(),
    'user' => $user,
     'token' => $token
];

在前面：

async getCountries(){
  try {
    const response = await axios
      .get(`${this.apiUrl}/register`)
      .catch((error) => {
        console.log(error);
      });

    // Populate countries array
    this.countries = response.data.countries;

    console.log(this.countries);

  } catch (error) {
    console.log(error);
  }
}

當我獲取注冊路由422 (Unprocessable Content)時，我在 Chrome 的控制臺中收到錯誤訊息。

為什么？

uj5u.com熱心網友回復：

您可以在回應陣列中添加引數，例如“國家”并分配變數值。您將在 async getCountries() 作為回應。

$response = [
    'user' => $user,
    'token' => $token,
    'countries' => $this->countries
];

 const response = await axios
      .get(`${this.apiUrl}/register`)
      .catch((error) => {
        console.log(error);
      });

    // Populate countries array
    this.countries = response.data.countries;

為了更好地理解 API 回應，我建議你應該使用 postman。

郵遞員 下載

標籤：

上一篇：是什么導致了這個Laravel8和Vue3應用程式中的驗證錯誤？

下一篇：UITableView中帶有多行UILabel的標題的動態高度