前提・実現したいこと
vue.jsでタイピングゲームを単一ファイルで作り、その後にvue cli上でコンポーネント化しようとしたら、単一ファイルのときには出てこなかった以下のようなエラーが出てきて困っています。エラーの解決にご支援願います。
発生している問題・エラーメッセージ
78:13 error Unexpected side effect in "isTypingCorrect" computed property vue/no-side-effects-in-computed-properties 79:13 error Unexpected side effect in "isTypingCorrect" computed property vue/no-side-effects-in-computed-properties 83:15 error Unexpected side effect in "isTypingCorrect" computed property vue/no-side-effects-in-computed-properties 84:15 error Unexpected side effect in "isTypingCorrect" computed property vue/no-side-effects-in-computed-properties ✖ 4 problems (4 errors, 0 warnings)
該当のソースコード
javascript
1<template> 2 <div id='app' class="text-center"> 3 <!-- ゲーム中の画面 --> 4 <div v-if="trying"> 5 <div class="row"> 6 <div class="col-12"> 7 <img src="../imege/good.png" v-if="isTypingCorrect"> 8 <img src="../imege/bad.jpg" v-else> 9 </div> 10 </div> 11 <div class="badge badge-dark" style="margin: 15px 0;">第{{ currentWordNumber }}問</div> 12 <h1>{{ currentWord }}</h1> 13 <div class="row"> 14 <div class="offset-4 col-4"> 15 <input id="input-typing" type="text" class="form-control" v-model="typingText"> 16 </div> 17 </div> 18 <br> 19 <div class="row"> 20 <div class="col-12"> 21 <button @click="start()" type="button" class="btn btn-light btn-lg">やり直す</button> 22 </div> 23 </div> 24 </div> 25 26 <!-- ゲーム開始前の部分 --> 27 <div v-if="!trying" style="padding: 15px"> 28 <button @click="start()" type="button" class="btn btn-danger btn-lg">ゲームスタート</button> 29 </div> 30 </div> 31</template> 32 33<script> 34 35export default ({ 36 name: "game", 37 data() { 38 return { 39 trying: false, 40 words: [ 41 'apple', 42 'dog', 43 'famous', 44 'dustbox', 45 'drink', 46 'watch', 47 'paper', 48 'elephant', 49 'computer', 50 'furniture' 51 ], 52 solvedWords: [], 53 typingText: '', 54 } 55 }, 56 methods: { 57 start(){ 58 this.trying = true 59 this.solvedWords = [] 60 this.typingText = '' 61 }, 62 63 }, 64 computed: { 65 currentWord(){ 66 const unsolvedWords = this.words.filter((word) => { 67 return (!this.solvedWords.includes(word)) 68 }) 69 const randomIndex = Math.floor(Math.random()*unsolvedWords.length) 70 return unsolvedWords[randomIndex] 71 }, 72 currentWordNumber(){ 73 return this.solvedWords.length + 1 74 }, 75 isTypingCorrect(){ 76 if(this.typingText == this.currentWord){ 77 78 this.solvedWords.push(this.currentWord) 79 this.typingText = '' 80 81 if(this.words.length == this.solvedWords.length){ 82 83 this.solvedWords = [] 84 this.trying = false 85 alert('終了') 86 87 } 88 return true 89 } 90 const typingTextLength = this.typingText.length 91 return (this.typingText === this.currentWord.slice(0, typingTextLength)) 92 } 93 } 94 95 96}) 97</script> 98
試したこと
isTypingCorrectをcomputedではなく,methodsに入れてみた。
補足情報
使っているvueのバージョンは2です。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。