現在、vuejsにてあるコンポーネントを作成しています。 アイテムリストページがあり、アイテム名をクリックすると 編集ページに飛ぶというもので、その編集ページについてです。 編集ページにはアイテムの情報入力用のinput要素があり そのinput要素の初期値(value Vue インスタンス. （アイテムリストと編集ページは親子関係にはありません）, このコンポーネントが作成された際に、createdでaxiosを使いアイテムのデータ取得できています。 Direction / Branding / Design / Coding / Writing / UI / UX / System / SEO / Server Migration / Web Consulting / Web Marketing, |--------------------------------------------------------------------------, | Here is where you can register web routes for your application. （画面上部には、アイテム名が表示される部分があり、そこにはクリックされたアイテム名が表示されています）, teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。, 評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。, 上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。, Vue Router、Vuexともに利用しています。先ほどinputじゃなくてならいけるかなと思い試してみましたがダメでした, 現在は編集アイテムごとにURLは異なる形になっているのでURLが変わる方が分かりやすいです。（リストページに載っている各アイテムのリンクは/api/item/edit/(id)となっている形です。editページではcreatedでaxiosを使ってthis.$route.params.idを用いてサーバより対象データを取得しています）, すみません、先ほどcreatedの部分を載せました。質問にも記載しましたが、必要なデータが取れていることは確認できています。, value="ここの初期値をdataのnameにしたい" //value="{{name}}"にするとビルドエラー, :value="name"かv-bind:value="name"で動きませんか？ 全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。 var vm = new Vue({ // オプション}). v3.x のドキュメントを見たい場合はこちら, 全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。, Vue のデザインは、MVVM パターンと厳密には関連が無いものの、部分的には影響を受けています。慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使います。, Vue インスタンスを生成するには、オプションオブジェクトを渡します。このガイドの大部分では、これらのオプションを使用して望んだ挙動にするための方法について説明しています。参考までに、全てのオプションの一覧はAPI リファレンスで参照できます。, Vue アプリケーションは、 new Vue で作成されたルート Vue インスタンス(root Vue instance)で構成され、必要に応じてネストされたツリーや再利用可能なコンポーネントで形成されます。例えば、Todo アプリのコンポーネントツリーは次のようになります。, コンポーネントシステム については後ほど詳細を説明します。今は、全ての Vue コンポーネントは Vue インスタンスで、同じオプションオブジェクトを受け入れる(いくつかのルート特有のオプションを除く)と理解しておけば十分です。, Vue インスタンスが作成されると、自身の data オブジェクトの全てのプロパティをリアクティブシステムに追加します。これらのプロパティの値を変更すると、ビューが”反応”し、新しい値に一致するように更新します。, このデータを変更すると、ビューが再レンダリングされます。dataのプロパティは、インスタンスが作成されたときに存在していた場合にのみリアクティブです。 つまり、以下のように新しいプロパティを追加する場合、, その後、 b への変更はビューの更新を引き起こさないでしょう。 後でプロパティが必要になることがわかっているならば、空でも存在しない場合でも初期値を設定するだけで済みます。 例：, これに対する唯一の例外は、既存のプロパティの変更を防ぐ Object.freeze（）の使用です。これはリアクティブシステムが変更を 追跡 することができないことも意味します。, data プロパティに加えて、Vue インスタンスは、いくつかの便利なプロパティとメソッドを持っています。これらはユーザ定義のプロパティと区別するために、頭に $ が付けられています。 例：, 将来的には、インスタンスのプロパティとメソッドの完全なリストについては、 API リファレンス を参照してください。, 各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかの ライフサイクルフック(lifecycle hooks) と呼ばれる関数を実行します。, 例えば、created フックはインスタンスが生成された後にコードを実行したいときに使われます。, この他にもインスタンスのライフサイクルの様々な段階で呼ばれるフックがあります。例えば、mounted、 updated、そして destroyed などがあります。全てのライフサイクルフックは、this が Vue インスタンスを指す形で実行されます。, インスタンスプロパティまたはコールバックでアロー関数 を使用しないでください。例えば、 created: () => console.log(this.a) や vm.$watch('a', newValue => this.myMethod()) です。アロー関数は this をもたないため、this は他の変数と同様に見つかるまで親スコープをレキシカルに探索され、そしてしばしば、Uncaught TypeError: Cannot read property of undefined または Uncaught TypeError: this.myMethod is not a function のようなエラーが発生します。, 以下は、インスタンスライフサイクルのダイアグラムです。今はこのダイアグラムを完全に理解する必要はありませんが、将来役に立つことでしょう。. Vue インスタンスの作成. KOHIMOTO LABOは、KOHIMOTO inc.のメンバーが気ままに更新しているブログです. vuejs-datepickerへの入力値を取得するのは簡単です。 v-model="defaultDate" を定義しているので、Vue.jsのデータバインディングの仕組でvalueには入力値が自動的にセットされます。 なので。 Nuxt + echo(Golang) でフロントからAPIにデータをPOSTする方法を教えていただ... Vue.jsの単一ファイルコンポーネントで、App.vueから子コンポーネントにデータを渡せない, 回答 データの初期化. 1 / クリップ v-on:click=“counter++” のように、if や loop を含まないJSの場合はインラインに直書きできます。 また、v-on:keyup.enter.space のようにつなげられます。 v-model. 編集ページに飛ぶというもので、その編集ページについてです。, 編集ページにはアイテムの情報入力用のinput要素があり ・編集 2018/11/24 22:46, 以下のようなinputフォームのvalue属性の内容を、vueのデータにすることはできないでしょうか。（初期値だけなので、連動はしなくてもよいです）,