如何從 axios 中檢索數據並將其填寫到 Vue.js 中的編輯表單（選擇選項）中？

Question

我有一個表單，可以編輯用戶。 為此，用戶 object（按 id）的數據由 axios 檢索並顯示在輸入字段中。 輸入字段和日期選擇器沒有問題 - 因此顯示信息。 但數據未顯示在 select 字段中。 我想顯示之前選擇的選項（我得到了另一個表單，你可以在其中創建一個用戶。用戶的ID是通過props傳遞的。），但是我得到一個錯誤如下：

[Vue warn]: Property or method "bundeslaender" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

我為vorgesetzten得到同樣的錯誤。 此外，應該可以更改選定的選項。

Vue組件實現如下：

<template>
  <div>
    <b-container>
      <h2>Benutzer bearbeiten</h2>
      <b-form @reset="onReset" @submit.prevent="saveBenutzer" id="form">
        <b-form-group
          id="input-group-2"
          label="Benutzername:"
          label-for="input-2"
        >
          <b-form-input
            type="text"
            id="input-2"
            v-model="Benutzer.Benutzername"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group id="input-group-3" label="Passwort:" label-for="input-3">
          <b-form-input
            type="password"
            id="input-3"
            v-model="Benutzer.Passwort"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group id="input-group-4" label="Vorname:" label-for="input-4">
          <b-form-input
            type="text"
            id="input-4"
            v-model="Benutzer.Vorname"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group id="input-group-5" label="Nachname:" label-for="input-5">
          <b-form-input
            type="text"
            id="input-5"
            v-model="Benutzer.Nachname"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-6"
          label="Geburtsdatum:"
          label-for="input-6"
        >
          <b-form-datepicker
            id="input-6"
            v-model="Benutzer.Geburtsdatum"
            placeholder="Geburtsdatum auswählen"
            required
          ></b-form-datepicker>
        </b-form-group>

        <b-form-group id="input-group-7" label="Email:" label-for="input-7">
          <b-form-input
            type="email"
            id="input-7"
            v-model="Benutzer.Email"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-8"
          label="Betriebszugehörigkeit seit:"
          label-for="input-8"
        >
          <b-form-datepicker
            id="input-8"
            v-model="Benutzer.Eintrittsdatum"
            placeholder="Datum auswählen"
            required
          ></b-form-datepicker>
        </b-form-group>

        <b-form-group
          id="input-group-9"
          label="Bundesland:"
          label-for="input-9"
        >
          <b-form-select id="input-9" v-model="Benutzer.bundesland" required>
            <b-form-select-option
              v-for="bundesland in bundeslaender"
              :key="bundesland.BundeslandID"
              v-bind:value="bundesland"
            >
              {{ bundesland.Name }}
            </b-form-select-option>
          </b-form-select>
        </b-form-group>

        <b-form-group label="Zusätzliche Rolle:">
        <b-form-checkbox id="input-10" v-model="Benutzer.istVorgesetzter"
          >Vorgesetzter</b-form-checkbox
        >
        <b-form-checkbox id="input-11" v-model="Benutzer.istAdmin"
          >Admin</b-form-checkbox
        >
        </b-form-group>

        <b-form-group
          id="input-group-11"
          label="Vorgesetzter:"
          label-for="input-11"
        >
          <b-form-select id="input-11" v-model="Benutzer.Vorgesetzter" required>
            <b-form-select-option
              v-for="vorgesetzter in vorgesetzten"
              :key="vorgesetzter.BenutzerID"
              v-bind:value="vorgesetzter"
            >
              {{ vorgesetzter.Vorname + " " + vorgesetzter.Nachname }}
            </b-form-select-option>
          </b-form-select>
        </b-form-group>

        <b-button type="submit" variant="primary">Speichern</b-button>
        <b-button type="reset" variant="secondary">Abbrechen</b-button>
      </b-form>
    </b-container>
  </div>
</template>

<script>
import axios from "axios";
import { server } from "../helper.js";
export default {
  name: "editBenutzer",
  data() {
    return {
      BenutzerID: null,  
      Benutzer: {
        Benutzername: "",
        Passwort: "",
        Vorname: "",
        Nachname: "",
        Geburtsdatum: "",
        Email: "",
        Eintrittsdatum: "",
        bundesland: "",
        istAdmin: false,
        istVorgesetzter: false,
        Vorgesetzter: ""
      }
    };
  },
  created() {
    this.BenutzerID = this.$route.params.id;
    this.getBenutzer();
    /*this.getBundeslaender();
    this.getVorgesetzten();*/
  },
  methods: {
    onReset(evt) {
      evt.preventDefault();
        this.Benutzer.Benutzername = "";
        this.Benutzer.Passwort = "";
        this.Benutzer.Vorname = "";
        this.Benutzer.Nachname = "";
        this.Benutzer.Geburtsdatum = "";
        this.Benutzer.Email = "";
        this.Benutzer.Eintrittsdatum = "";
        this.Benutzer.bundesland = "";
        this.Benutzer.istAdmin = false;
        this.Benutzer.istVorgesetzter = false;
        this.Benutzer.Vorgesetzter = "";
      this.$router.push({ name: "benutzerverwaltung" });
    },
    getBenutzer(){
        axios.get(server.baseURL + '/benutzer/' + this.BenutzerID).then(response => 
        { this.Benutzer = response.data });
    },
    saveBenutzer() {
      let benutzerdaten = {
        Benutzername: this.Benutzer.Benutzername,
        Passwort: this.Benutzer.Passwort,
        Vorname: this.Benutzer.Vorname,
        Nachname: this.Benutzer.Nachname,
        Geburtsdatum: this.Benutzer.Geburtsdatum,
        Email: this.Benutzer.Email,
        Eintrittsdatum: this.Benutzer.Eintrittsdatum,
        bundesland: this.Benutzer.bundesland.BundeslandID,
        istAdmin: this.Benutzer.istAdmin,
        istVorgesetzter: this.Benutzer.istVorgesetzter,
        Vorgesetzter:
          this.Benutzer.Vorgesetzter.Vorname + " " + this.Benutzer.Vorgesetzter.Nachname,
      };
      this.updateBenutzer(benutzerdaten);
    },
    /*updateBenutzer(data) {
      axios.put(server.baseURL/customer/update?customerID=${this.id}`,
          customerData
        )
        .then(data => {
          router.push({ name: "home" });
        });
    },*/
    getBundeslaender() {
      axios
        .get(server.baseURL + "/bundesland")
        .then((response) => { this.bundeslaender = response.data });
    },
    getVorgesetzten() {
      axios
        .get(server.baseURL + "/benutzer/vorgesetzter?istVorgesetzter=true")
        .then((response) => { this.vorgesetzten = response.data });
    },
  },
};
</script>

Answer 1

您沒有在數據部分定義bundeslaender和vorgesetzten 。

它應該是這樣的：

data() {
    return {
      BenutzerID: null,  
      bundeslaender: [],
      vorgesetzten: [],
      Benutzer: {
        Benutzername: "",
        Passwort: "",
        Vorname: "",
        Nachname: "",
        Geburtsdatum: "",
        Email: "",
        Eintrittsdatum: "",
        bundesland: "",
        istAdmin: false,
        istVorgesetzter: false,
        Vorgesetzter: ""
      }
    };