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(); } }
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/25 23:52