如何从 axios 中检索数据并将其填充到 Vue.js 中的编辑表单（选择选项）中？

Question

我有一个表单，可以编辑用户。为此，用户对象的数据（按 id）由 axios 检索并显示在输入字段中。输入字段和日期选择器没有问题 - 因此显示信息。但数据不会显示在选择字段中。我想显示之前选择的选项（我得到了另一个表单，你可以在其中创建一个用户。用户的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: ""
      }
    };