vue更新用户和预填充表单

dz6r00yl  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(236)

我的vue应用程序有问题。我创建了一个用户,然后我想更新他,我打开了更新表单,但字段是空的。我的v型是:用户名。当我将v-model更改为:bozpusers.username时,我已经用实际用户名预先填充了该字段,但当我将其发送到db a refresh时,所有内容都是空的。
我的代码在这里:

<template>
  <v-card>
    <v-card-title class="orange lighten-2 white--text">Upraviť používateľa: {{ bozpUsers.username }}</v-card-title>
    <v-card-text>
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-text-field color="orange lighten-2 white--text"
              label="Používateľské meno"
              required
              v-model="username"
              append-icon="mdi-account"
              clearable
            ></v-text-field>
          </v-col>
          <v-col cols="12">
            <v-text-field color="orange lighten-2 white--text"
              label="Heslo"
              type="password"
              required
              v-model="password"
              append-icon="mdi-lock"
              clearable
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="orange lighten-2 white--text" @click="$emit('close-card')">
        Zavrieť
          <v-icon>mdi-close</v-icon>
      </v-btn>
      <v-btn
        color="orange lighten-2 white--text"
        @click="updateUser"
      >
        Uložiť
        <v-icon>mdi-content-save</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import UsersService from '@/services/UsersService';

export default {
  props: ["bozpUsers"],
  data: () => ({
    id: "",
    username: "",
    password: "",
    role: "user",
    error: null,
  }),
  methods: {
    async updateUser() {
      this.error = null;
      const bozpUpdatedUser = {
        id: this.id,
        username: this.username,
        password: this.password,
        role: this.role,
      }
      UsersService.put(this.bozpUsers.id, bozpUpdatedUser).then((response) => {
        this.$emit("close-card");
      })
      .catch((error) => {
        this.error = "Failed to submit data - please try again later.";
        });
    },
  },
};

</script>

有什么解决办法吗?我可以预先填充字段吗?当我将数据发送到db时,它们实际上会保存吗?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题