[Vue.js]フォームバインディングさせると、phpの前回の入力値も書き変わる問題

元々作ってた仕組み

phpのバリデーションチェックではじかれた場合、
入力情報を残す仕組みにしておりました。

html
1<!-- 元々のインプットフォーム -->
2<input type="text" name="username" value="<?php if(!empty($_POST['username'])){echo $_POST['username'];} ?>" class="required">

今回の試み

Vue.jsを覚えたのもあって、実稼働で試してみたくなりまして、
フォームバインディングを実装しました。

フォームバインディング自体はうまくいったのですが、
バリデーション後今迄、入力情報が消えずに保持されていたものが、
フォームバインディングにより、書きかわってしまう問題が発生いたしました。

html
1<!-- v-modelを入れたインプットフォーム -->
2<input v-model="username" type="text" name="username" value="<?php if(!empty($_POST['username'])){echo $_POST['username'];} ?>" class="required">

実現したい事

フォームバインディングしつつ、phpの前回の入力情報を保持させる方法はあるのでしょうか？
Vue.jsにお詳しい方、ご教授お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

v-model使ってるのでdataのところに入れないといけません

例

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="app">
10  <div>
11    <input v-model="username" type="text" name="username" value="この値は上書きされる">
12  </div>
13</div>
14<script>
15var app = new Vue({
16  el: '#app',
17  data: {
18    username: 'ここにデフォルト値入れる(PHPの値を入れる)',
19  },
20});
21</script>
22</body>
23</html>

投稿2019/01/28 08:10

rururu3

総合スコア5545

DaisukeMori

2019/01/29 02:15

ご丁寧にサンプルコードありがとうございます。 Vueのdata部分にもphpのコードって書けるんですね。うまくいったコードアップしておきます。 <script type="text/javascript"> var app = new Vue({ el: '#app', data: { username: '<?php if(!empty($_POST['username'])){echo $_POST['username'];} ?>', email: '<?php if(!empty($_POST['email'])){echo $_POST['email'];} ?>', role: '<?php if(!empty($_POST['role'])){echo $_POST['role'];} ?>', } }) </script>

行動規範の内容に同意します