[Vue.js] 定義しているはずの変数が定義されていない状態になっており解消できません[Nuxt.js]

Question

Nuxt.js初学者で技術書やネット記事を参考にしながらアプリを作っています。

https://note.com/kawa1228/n/n9687ceb3152d

上記の記事を基にfirebaseを使い画像とテキストを投稿する機能を実装しようとしているのですが

Property or method "p_name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App/pages/posts/new.vue> at app/pages/posts/new.vue
       <Nuxt>
         <App/layouts/default.vue> at app/layouts/default.vue
           <Root>

というエラーがコンソールとコマンドに出て解消できないという状況に陥っています。

該当のソースコード

**pages/posts/new.vue.js**
<template>
<div class="post-wrapper">
  <div class="post-title">
    <h2>投稿ページ</h2>
  </div>
  
 <div class="post-name-wrapper">
   <input type="text" class="post-name" v-modle="p_name"  placeholder="選手の名前" />
 </div>

 <div class="post-text-wrapper">
   <textarea class="post-text" v-model="body" placeholder="コメント"/>
 </div>

 <div class="post-image-wrapper">
    <img v-if="preview" src="preview"/>
    <input type="file" accept="image/png,image/jpeg" @change="previewImage"/>
  </div>

 <div class="post-btn-wrapper">
   <button class="post-btn" @click="postContents">投稿</button>
 </div>
</div>



</template>

<script>

export default {
  data: {
  return () {
   file: null
   preview: ''
   fileName: ''
   body: ''
   p_name:''
  }
 },

  methods: {
    previewImage(e) {
    const file = e.target.files[0];
    this.file = file
    const reader = new FileReader()
     reader.onload = (e) => {
       this.preview = e.target.result
       this.fileName = file.name
     }
     reader.readAsDataURL(file)
},

   async postContents() {
     const d = new Date()
     const today = d.toLocaleDateString()

     const contents = {
       note: {
         created_at: today,
         title: this.title,
         p_name:this.p_name,
         body: this.body,
       },
       image: {
         file: this.file,
         name: this.fileName
       }
     }
     await this.$store.dispatch('postContents', contents)
     console.log('load finish') // dataをclearにする
   }
 }
}

</script>

<style>
.post-title h2 {
font-size: 28px;
}

.post-name-wrapper {
margin-top: 20px;
}

.post-name {
width: 300px;
background-color: #ffff;
border: 1px solid ;
height: 25px;
}

.post-image-wrapper {
display: flex;
flex-direction: column;
}

.post-text-wrapper {
display: flex;
flex-direction: column;
margin: 10px 0 10px 0;
}

.post-text {
width: 500px;
height: 200px;
background-color: #ffff;
border: 1px solid ;
}

.post-image-wrapper {
  margin: 10px 0;
  width: 300px;
}

.post-btn-wrapper {
  display: inline-block;
}

.post-btn {
padding: 10px 50px;
background-color: #ffff;
border: solid 1px;
}
</style>

**app/store/index.js**
import { auth ,storage, db } from '~/plugins/firebase'

export const strict = false

export const state = () => ({
    user: null,
})

export const mutations = {
    setUser(state, payload) {
        state.user = payload
    }
}

export const actions = {
    signUp({ commit }, { email, password }) {
        return auth().createUserWithEmailAndPassword(email, password)
    },

    signInWithEmail({ commit }, { email, password }) {
        return auth().signInWithEmailAndPassword(email, password)
    },

    signInWithGoogle({ commit }){
        return auth().signInWithPopup(new auth.GoogleAuthProvider())
    },

    signOut() {
        return auth().signOut()
    },

    // 投稿機能（仮）始まり
    async postContent(context, payload) {
        const contents = payload
        const loadImage = await context.dispatch('uploadImage', {
          name: contents.image.name,
          file: contents.image.file
        })
        contents.image = loadImage
     
        const articlesRef = db.collection('articles')
        await articlesRef.add(contents)
    },


    uploadImage(context, payload) {
        if (!payload.file) {
          return {
            name: 'サンプル画像',
            src: 'https://placehold.jp/150x150.png'
          }
        }
        const storageRef = storage.ref()
     
        return new Promise((resolve, reject) => {
          storageRef
            .child(`images/${payload.name}`)
            .put(payload.file)
            .then((snapshot) => {
              snapshot.ref.getDownloadURL().then((url) => {
                resolve({ name: payload.name, src: url })
              })
            })
            .catch((err) => {
              console.log('画像投稿エラー', err)
            })
        })
      }
    // 投稿機能（仮）終わり
}

export const getters = {
    user(state){
        return state.user
    },
    isAuthenticated (state) {
        return !!state.user
    }
}

試したこと

エラー文を見るにp_nameが定義されていないことが原因のエラーということかと思いますが、上記のコードの

export default {
  data: {
  return () {
   file: null
   preview: ''
   fileName: ''
   body: ''
   p_name:''
  }
 },

からもわかる通り定義しています（定義の仕方がそもそも間違っていたらすみません）。

このエラーについて調べてみたところ

・yarn installしなおす
・vscodeを閉じてアプリを再起動する
・npm run watchというコマンドを試す

というような解決法が出てきたので試してみたのですがどれも解決には至りませんでした。

この問題の解決法をご存じの方がいらっしゃいましたらアドバイスお願いします。

Comments

[ozwk]

v-modle ? 転記ミスですか?

Answer 1

dataの定義の仕方が誤っていませんか？

export default {
--  data: {
--  return () {
++ data() {
++  return {
   file: null
   preview: ''
   fileName: ''
   body: ''
   p_name:''
  }
 },

Comments

[jime1234567]

ご回答いただきありがとうございます。
ご指摘の通りdataの定義の仕方が間違っており修正した結果問題は解決されました。