[nuxt.js]Vue warn: Property or method is not defined

Question

Nuxt.jsとLaravelを使用して、crud機能を作成しています。
[Vue warn]: Property or method "saved" is not defined on the instance but referenced during render.というエラーが出ています。"saved"ところが,"name","content"となっている同じエラーが出ています。data{}のところにsave:'',name:'',content:''と書いたのですが、エラーが解消されませんでした。
テーブルのnameカラムの名前がもともと、titleだったのですが、nameに変更した後にこのエラーが出てしまいました。テーブルのカラム名を変更したことがエラーの元になったのでしょうか。エラーを解消できないため、アドバイスをいただきたいです。よろしくお願いします。

<template lang="html">
    <div class="container">
        <div v-if="saved" class="alert alert-primary" role="alert">
        保存しました

        </div>
        <form>
            <div class="form-group">
                <label for="TopicTitle">タイトル</label>
                <input type="text" class="form-control" id="TopicTitle" v-model="name">
            </div>
            <div class="form-group">
                <label for="TopicContent">内容</label>
                <textarea class="form-control" id="TopicContent" rows="3" v-model="content"></textarea>
            </div>
            <button type="submit" class="btn btn-primary" @click.prevent="create">登録</button>
        </form>
  </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data: function() {
        return {
           name:'',
           content:'',
           save:'',       
    },
    methods: {
        create : function() {
            axios.post('http://127.0.0.1:8000/api/posts', {
                name: this.name,
                content: this.content,
            })
            .then((res) => {
                console.log(res)
                this.name = '';
                this.content = '';
                this.saved = true;
                console.log('created');
            });
        }
    }
}

Laravel PostController.php

public function create(Request $request)
 {
   $post = new Post;
   $post->name = $request->name;
   $post->content = $request->content;
   $post->save();
    return response()->json(['posts'=>$post],200);
 }

Comments

[szk.]

saveかsavedでタイポしてませんか？

[退会済みユーザー]

返信ありがとうございます。save,savedどちらかでタイプミスしてるかということですね？
savedで統一したのですが、解決しませんでした????‍♂️

Answer 1

[追記]
以下で確認取れました！
axiosをgetに変更し、URLのパラメータで渡してますので、Laravel側ちょっと弄ってやってください。

普段axios使わないので詳しい原因は正直不明なんですが、
なんでかpostでこのデータの渡し方だとエラーになるので、getに変更し、URLのパラメータでテストした結果問題なく値が返ってきてます。

お試しください！

  axios.post('http://127.0.0.1:8000/api/posts', {
                name: this.name,
                content: this.content,
            })

<template lang="html">
    <div class="container">
        <div v-if="save" class="alert alert-primary" role="alert">
        保存しました

        </div>
        <form>
            <div class="form-group">
                <label for="TopicTitle">タイトル</label>
                <input type="text" class="form-control" id="TopicTitle" v-model="name">
            </div>
            <div class="form-group">
                <label for="TopicContent">内容</label>
                <textarea class="form-control" id="TopicContent" rows="3" v-model="content"></textarea>
            </div>
            <button type="submit" class="btn btn-primary" @click.prevent="create">登録</button>
        </form>
  </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      content: "",
      save: "",
      url:""
    };
  },
  methods: {
    async create() {
      await axios
        .get(
          url+"?name=" +
            this.name +
            "&content=" +
            this.content
        )
        .then((response) => {
          console.log(response);
          this.name = "";
          this.content = "";
          this.save = true;
          console.log("created");
        });
    },
  },
};
</script>

---

ざっとみただけなんでダメだったらごめんなさい。

メソッドチェーンの中にnameとcontent、saveがあるからと思われます。

axiosの上に、
var _this = this

thenの中の　thisを　_thisに置き換えてください

Comments

[退会済みユーザー]

返事ありがとうございます！
試したのですが、解消されませんでした。

[Tatsunosuke]

あら、すみません！
こちらでもこのソースを試してみますね！

'http://127.0.0.1:8000/api/posts',
これは、データベースへの保存のAPIみたいな感じですか？

[退会済みユーザー]

そうです！投稿ボタン押して
内容が保存されるようにしたいです。

[退会済みユーザー]

回答ありがとうございます！
Property or method "saved" is not defined on the instance but referenced during render.というエラーが出ていたのが、解消されました????‍♂️
後、送信したデータがきちんと保存されるか再度確認します。