(vue.js) inputフォームの初期値(value属性)を、vueのdataの内容にしたい

Question

実現したいこと

以下のようなinputフォームのvalue属性の内容を、vueのデータにすることはできないでしょうか。（初期値だけなので、連動はしなくてもよいです）

<input type="text" id="name" v-model="name" value="ここの初期値をdataのnameにしたい"/>

詳細

現在、vuejsにてあるコンポーネントを作成しています。

アイテムリストページがあり、アイテム名をクリックすると
編集ページに飛ぶというもので、その編集ページについてです。

編集ページにはアイテムの情報入力用のinput要素があり
そのinput要素の初期値(value属性)はアイテムリストページにて
クリックされたアイテムの情報が入力されているようにしたいです。
（アイテムリストと編集ページは親子関係にはありません）

そのままですが、当該の部分のコードです。

//template
<input 
  type="text"
  id="name"
  v-model="name"  //双方向でなくていいのでv-bindでよいかもしれません
  value="ここの初期値をdataのnameにしたい"  //value="{{name}}"にするとビルドエラー
/>

//script
data() {
  return {
    name:'', //ここにはaxiosにて取得したアイテム名が入っています。
  }
},

このコンポーネントが作成された際に、createdでaxiosを使いアイテムのデータ取得できています。
（画面上部には、アイテム名が表示される部分があり、そこにはクリックされたアイテム名が表示されています）

ご存知の方いましたら、よろしくお願いします。

情報を追加させて頂きます。

created(){
    this.fetchItem()
  },
methods:{
 fetchItem(){
      const token = localStorage.getItem('token');
　　　 //JWT認証を使用しているためヘッダーにトークンをつけて送る必要があります
      axios.get('/api/items/users/' + this.$store.state.user.id + '/' + this.$route.params.id, { headers: { Authorization: `Bearer ${token}` } })
      .then(res => {
        this.name = res.data.name  //ここでnameにレスポンスデータがセットされます
      })
      .catch(err => {
        this.message = err.data.statusText;
      })
    },

Comments

[NozomuIkuta]

Vue Routerは使用していますか。また、Vuexは使用していますか。

[morguri]

Vue Router、Vuexともに利用しています。先ほどinputじゃなくて<textarea v-model="name"></textarea>ならいけるかなと思い試してみましたがダメでした

[NozomuIkuta]

URLは編集するアイテムによって変わっていいですか？共通ですか？

[morguri]

現在は編集アイテムごとにURLは異なる形になっているのでURLが変わる方が分かりやすいです。（リストページに載っている各アイテムのリンク<router-link>は/api/item/edit/(id)となっている形です。editページではcreatedでaxiosを使ってthis.$route.params.idを用いてサーバより対象データを取得しています）

[NozomuIkuta]

created()の部分を載せていただきたいです。

[morguri]

すみません、先ほどcreatedの部分を載せました。質問にも記載しましたが、必要なデータが取れていることは確認できています。

Answer 1

value="ここの初期値をdataのnameにしたい" //value="{{name}}"にするとビルドエラー

:value="name"かv-bind:value="name"で動きませんか？
その場合、v-modelは消してください。

Comments

[morguri]

:value="name"にしたところ、出来ました！
ただ、v-modelが使えないということで、input要素に入力したデータをvue側のデータのnameに反映させるために
<input type="text" id="name" :value="name" @input="name = $event.target.value"/>
としました。
v-modelはbindとonの糖衣構文であることは知っていたのですが
このようなケースの時に分けて使うのかーという点も勉強になりました。
この度はありがとうございました！

[NozomuIkuta]

解決したようでよかったです。
ちなみに、`:value="name"`を消して`v-model="name"`だけでも動きませんか？

[morguri]

:value消して、v-modelだけにしたところ動きました(泣)
v-modelだけのパターンは一番最初にやってダメだった記憶があり、それで「あぁ、値をいじるにはvalue属性変えないといけないのか～」と思い、色々やってみたというところです。
色々お手数おかけしました。

[NozomuIkuta]

`v-model`は、デフォルトだと`value`を`input`イベントで監視・更新するシュガーシンタックスです。
エラーだったのは、`v-model`と`value`を併記したことと、`value="{{name}}"`で構文ルールから逸脱したためだと思います。"{{ expression }}"は、式の結果をテキストとして出力するためのものなので。最初に`v-model`だけでダメだったのは、スペリングミスか何かかもしれません。

いずれにせよ、解決したようでよかたったです。
ではまた

[morguri]

他のコンポーネントを見ていて気づいたのですが、最初に試した時は、 <input type="text" v-model="name" @focus="messageClear"/>となっており、しかもそのmessageClearメソッドは未定義でした。なので、v-modelで反映されなかったのは、input要素に未定義のメソッドを記載していたことでした。methodsにmessageClearを定義したら上記の文でも反映されます。
ほぼ同じ内容の他コンポーネントからのコピペで作ったこともあり、消すべき部分を消していなかったことと
一旦無駄なものはすべて省いて、最小構成で動作確認するという基本が抜けていました。
長々とすみませんが、ありがとうございました。