実現したいこと
以下のようなinputフォームのvalue属性の内容を、vueのデータにすることはできないでしょうか。(初期値だけなので、連動はしなくてもよいです)
<input type="text" id="name" v-model="name" value="ここの初期値をdataのnameにしたい"/>
詳細
現在、vuejsにてあるコンポーネントを作成しています。
アイテムリストページがあり、アイテム名をクリックすると
編集ページに飛ぶというもので、その編集ページについてです。
編集ページにはアイテムの情報入力用のinput要素があり
そのinput要素の初期値(value属性)はアイテムリストページにて
クリックされたアイテムの情報が入力されているようにしたいです。
(アイテムリストと編集ページは親子関係にはありません)
そのままですが、当該の部分のコードです。
vue
1//template 2<input 3 type="text" 4 id="name" 5 v-model="name" //双方向でなくていいのでv-bindでよいかもしれません 6 value="ここの初期値をdataのnameにしたい" //value="{{name}}"にするとビルドエラー 7/> 8 9//script 10data() { 11 return { 12 name:'', //ここにはaxiosにて取得したアイテム名が入っています。 13 } 14},
このコンポーネントが作成された際に、createdでaxiosを使いアイテムのデータ取得できています。
(画面上部には、アイテム名が表示される部分があり、そこにはクリックされたアイテム名が表示されています)
ご存知の方いましたら、よろしくお願いします。
情報を追加させて頂きます。
vue
1created(){ 2 this.fetchItem() 3 }, 4methods:{ 5 fetchItem(){ 6 const token = localStorage.getItem('token'); 7 //JWT認証を使用しているためヘッダーにトークンをつけて送る必要があります 8 axios.get('/api/items/users/' + this.$store.state.user.id + '/' + this.$route.params.id, { headers: { Authorization: `Bearer ${token}` } }) 9 .then(res => { 10 this.name = res.data.name //ここでnameにレスポンスデータがセットされます 11 }) 12 .catch(err => { 13 this.message = err.data.statusText; 14 }) 15 },
回答1件
あなたの回答
tips
プレビュー