Vue.js inputタグ 変更前の値を表示させたい。

Question

入力画面で、保存されていた情報を入力欄に表示させることをしたいです。

input(type="text" autocomplete="name" :placeholder="currentUser.name" v-model="changedUser.name")

ここにvalue="currentUser.name"を追加しましたが、うまくいかずに困っています。

<template lang="pug">
div.auth
  Header
  div.auth__container
    div.auth__inner
      h1.auth__heading 登録情報変更
      ul.notice(v-if="!errorMessages.length == 0")
        li.notice__item(v-for="(msg, index) in errorMessages" :key="index")
          | {{ msg }}
      ValidationObserver(ref="obs" v-slot="{ invalid, validate }")
        form.form(@submit.prevent="submitUpdateUser")
          div.form__group
            label
              | お名前
              br
              input(type="text" autocomplete="name" :placeholder="currentUser.name" v-model="changedUser.name")
          div.form__group
            label
              | メールアドレス
              br
              input(type="email" autocomplete="email" :placeholder="currentUser.email" v-model="changedUser.email")
          div.form__group
            ValidationProvider(v-slot="{ errors, classes }" mode="passive" rules="min:8|confirmed:confirmation" name="パスワード" v-model="changedUser.password")
              label(:class="classes")
                | パスワード
                br
                input(type="password" placeholder="半角英数字8文字以上")
              p.form__valid {{ errors[0] }}
          div.form__group
            ValidationProvider(v-slot="{ errors, classes }" mode="passive" rules="min:8" vid="confirmation" name="パスワード（確認用）")
              label(:class="classes")
                | パスワード（確認用）
                br
                input(type="password" placeholder="半角英数字8文字以上")
              p.form__valid {{ errors[0] }}
          div.form__group
            label
              | 電話番号
              br
              input(type="tel" autocomplete="tel" value="currentUser.tel" :placeholder="currentUser.tel" v-model="changedUser.tel")
          div.form__group
            label
              | 住所
              br
              | 〒
              input(type="postal-code" name="postal-code" :placeholder="currentUser.postcode" v-model="changedUser.postcode")
            label
              input(type="text" name="address" :placeholder="currentUser.address" v-model="changedUser.address")
          div
            button(type="submit" :disabled="invalid")
              | 変更する
            p.auth__link-bottom
              a(@click="$router.go(-1)")
                | 変更せずに戻る
  Footer
</template>

<script>
import Cookies from "js-cookie";
import Header from "~/components/organisms/Header";
import Footer from "~/components/organisms/Footer";

export default {
  middleware: "redirect",

  components: {
    Header,
    Footer,
  },
  data() {
    return {
      currentUser: {},
      changedUser: {},
      errorMessages: [],
      addresses: {
        zipcode: "",
        addressData: {},
      },
      formFocus: false,
    };
  },
  created() {
    this.currentUser = this.$store.getters["user/getUserData"];
  },

  methods: {
    async submitUpdateUser() {
      const url = "/api/users/edit";
      const headers = {
        uid: Cookies.get("uid"),
        client: Cookies.get("client"),
        "access-token": Cookies.get("access-token"),
      };
      await this.$axios
        .$put(url, this.changedUser, {
          headers,
        })
        .then(() => {
          this.$router.push({ path: "/" });
        })
        .catch((error) => {
          if (error.response.status === 422) {
            error.response.data.errors.full_messages.forEach((message) => {
              this.errorMessages.push(message);
            });
          }
        });
    },
    resetVilidMessage() {
      this.errorMessages = [];
    },
  },
};
</script>

Comments

[Suumon]

> ここにvalue="currentUser.name"を追加しましたが、うまくいかずに困っています。

これを追加したらエラーが表示されたのですか？
template部分、タグで書いてないからとかでは？

[masaosan18]

どういうことでしょうか？

[Suumon]

例えば、Headerとか<Header>って書きますよね？
そもそも、タグ（<>）を使ってないから問題起こっているのでは？と思ったのですが、
私が知らないだけでタグを使わない書き方があるのでしょうか？

[masaosan18]

PugっていうHTMLの書き方を採用しています。

[Suumon]

なるほど…知らなかったです。
勉強になりました。

Answer 1

input(type="text" autocomplete="name" :placeholder="currentUser.name" v-model="changedUser.name")

該当コードはここですかね？

既にvalueは v-modelで参照されているので、スクリプト側でchangedUser.name に currentUser.nameを代入してあげるのはどうでしょうか。