Vueコンポーネント内のdataとpropsの値がnullになってしまう

Question

Vueコンポーネント内で定義したdataとpropsがnullとなってしまう現象を解決したいです。

エラー

app.js?id=5d551c7144e8f7c4a7e5:2112 Uncaught (in promise) ReferenceError: responce is not defined

responce is not definedと出ているのが、responceはちゃんと定義されているように見られます。

ソールコード
ArticleVote.vue

<template>
  <div>
     <button
      type="button"
      class="btn m-0 p-1 btn-peach-gradient"
      @click="clickVote"
    >
    </button>
    {{ countVotes }} // ここに数字が表示されない
  </div>
</template>

<script>
export default {
  props:{
    initialIsVotedBy: {
       type: Boolean,
        default: false,
    },
    initialCountVotes: {
      type: Number,
      default: 0,
    },
    authorized: {
      type: Boolean,
        default: false,
    },
    endpoint: {
      type: String,
    },
    
    initialLoginTime: {
        type: Boolean,
        default: false,
    },

  },
  data(){
    return {
      isVotedBy: this.initialIsVotedBy,
      countVotes: this.initialCountVotes,
      loginTime: this.initialLoginTime,
    }
  },

  methods: {
    clickVote() {

      this.isVotedBy
        ? this.unvote()
        :this.vote()

      this.loginTime
        ? this.unvote()
        :this.vote()

    },

    async vote() {
      const response = await axios.put(this.endpoint)

      this.isVotedBy = true
      this.loginTime = false
      this.countVotes = response.data.countVotes
      console.log(this.countVotes)

      

    },

    async unvote() {
      const response = await axios.delete(this.endpoint)
      
      this.isVotedBy = false
      this.loginTime = true
      this.countVotes = responce.data.countVotes
      
    },
  },
}
</script>

Article

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
use App\User;
use Carbon\Carbon;

class Article extends Model
{

    public function user(): BelongsTo
    {
      return $this->belongsTo('App/User');
    }

    public function votes(): BelongsToMany
    {
        return $this->belongsToMany('App\User', 'votes')->withTimestamps();
    }

    public function getCountVotesAtribute(): int
    {
      return $this->votes->count();
    }



}

Answer 1

props に null が渡されても default が設定されないみたいです。
(undefined の場合のみdefaultが設定される？)

親のinitialCountVotesを見直すか、null の場合に 0 にします。

 data(){
    return {
      countVotes: this.initialCountVotes || 0,
    }
  },

あと、response ではないでしょうか。s が c になってます。

Comments

[Tikka123456]

ありがとうございます！