質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1526閲覧

Nuxt で更新フォームにデフォルトで既存のデータをプレースホルダーとして表示させたい

matsuo_basho

総合スコア88

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/11/22 15:40

いつもお世話になっております。

現在Nuxtを利用して簡単なブログを作成しております。

作成した記事の更新フォームを作成しておりますが、
ページを開いたタイミングで既存のデータを適切なフォーム上に入力された状態にさせたいです。

まだNuxt自体が初心者なのですが、以下の様に実装をしてみましたので
どの部分が悪いのかご教授いただけますと幸いです。

一応自分の中のイメージでは

  1. asyncData() 内でaxios$getを実行し、storeにあるpostを更新
  2. storeにあるpostを更新すれば、computedで同期的に返ってきた値が√asyncData()formData`に格納される
  3. formDataにデータが格納されれば、htmlv-modelに同期される

ただ、これだとCannot read property 'post' of undefinedとエラーが出てしまいます。

html

1<template> 2 <div> 3 4 <div class="form"> 5 6 <div class="form__row"> 7 <input v-model="formData.title" placeholder="タイトル"> 8 </div> 9 <div class="form__row"> 10 <textarea v-model="formData.content" placeholder="本文"></textarea> 11 </div> 12 13 <div class="form__row"> 14 <button @click="save">保存</button> 15 </div> 16 17 </div> 18 19 </div> 20</template> 21 22<script> 23import { mapActions, mapGetters } from "vuex"; 24export default { 25 26 async asyncData( {store, route, error} ){ 27 28 const id = route.params['edit'] 29 30 // ページを開いたタイミングでgetを実行し、既存の記事を取得する 31 await store.dispatch( 'posts/fetchPost', {id: id} ) 32 33 return { 34 formData: { 35 36 'title': this.post.title, 37 'content': this.post.content, 38 39 } 40 } 41 }, 42 43 computed: { 44 ...mapGetters( { 45 46 post: 'posts/post' 47 48 } ) 49 }, 50 51 methods: { 52 async save(){ 53 54 const payload = { 55 ...this.formData 56 } 57 58 await this.addPost( {payload} ) 59 this.$router.push( '/posts/' ) 60 61 }, 62 63 ...mapActions( 'posts', [ 'addPost' ] ) 64 } 65 66} 67</script>

javascript

1// store/posts.js 2 3export const state = () => ( { 4 5 posts: [], 6 post: "", 7 hasPrevious: "", 8 hasNext: "", 9 currentPageNum: "", 10 11} ) 12 13 14export const getters = { 15 16 posts: ( state ) => state.posts, 17 post: ( state ) => state.post, 18 hasPrevious: ( state ) => state.previous, 19 hasNext: ( state ) => state.next, 20 currentPageNum: ( state ) => state.currentPageNum, 21 22} 23 24 25export const mutations = { 26 27 setPosts( state, {posts} ){ 28 state.posts = posts.results 29 state.previous = posts.previous 30 state.next = posts.next 31 state.currentPageNum = posts.currentPageNum 32 33 }, 34 35 setPost( state, {post} ){ 36 state.post = post 37 }, 38 39 addPost( state, {post} ){ 40 state.posts.push( post ) 41 }, 42 43} 44 45 46export const actions = { 47 48 async fetchPosts( {commit} ){ 49 const posts = await this.$axios.$get( `/api/v1/posts/` ) 50 commit( 'setPosts', {posts} ) 51 }, 52 53 async fetchPost( {commit}, {id} ){ 54 const post = await this.$axios.$get( `/api/v1/posts/${id}` ) 55 commit( 'setPost', {post} ) 56 }, 57 58 async addPost( {commit}, {payload} ){ 59 const post = {...payload} 60 await this.$axios.$post( `/api/v1/posts/`, post ) 61 commit( 'addPost', {post} ) 62 }, 63 64 async updatePosts( {commit}, {id, posts} ){ 65 const post = await this.$axios.$put( `/api/v1/posts/${id}`, posts ) 66 commit( 'setPost', {post} ) 67 }, 68 69} 70

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

stateの初期値を期待するオブジェクトの型に合わせると良いと思います。

js

1export const state = () => ( { 2 posts: [], 3 post: { 4 title: "", 5 content: "", 6 }, 7 hasPrevious: "", 8 hasNext: "", 9 currentPageNum: "", 10})

投稿2020/11/28 03:59

DaikiOjima

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問