質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

解決済

1回答

4478閲覧

Vue.jsでUnexpected side effect in というエラーを解決したいです。

taro3104

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2021/05/13 12:39

前提・実現したいこと

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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Vueはあまり詳しくないので的外れでしたら申し訳ないのですが、computed プロパティで副作用を使っている、ということではないかと思います。

vue/no-side-effects-in-computed-properties | eslint-plugin-vue

javascript - Handling unexpected side effect in computed properties - VueJS - Stack Overflow

投稿2021/05/14 00:41

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問