現象
いつもお世話になっております。
現在フレームワークVue.jsで開発を行っているのですが、一旦画面に表示させようと「npm run dev」コマンドを実行したところ
以下のエラーメッセージが表示されました。
エラーメッセージを調べてもなかなか解決策が分からなかったので質問させていただきました。
どなたかわかる方ご教授お願いいたします。
発生している問題・エラーメッセージ
ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-7ba5bd90","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue Module build failed: SyntaxError: Assigning to rvalue (1:344) at Parser.pp$4.raise (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:2610:13) at Parser.pp$2.toAssignable (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:1529:12) at Parser.pp$3.parseMaybeAssign (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:1839:47) at Parser.pp$3.parseExpression (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:1803:19) at Parser.pp$1.parseStatement (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:797:45) at Parser.pp$1.parseBlock (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:1076:23) at Parser.pp$3.parseFunctionBody (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:2466:22) at Parser.pp$1.parseFunction (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:1177:8) at Parser.pp$3.parseExprAtom (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:2082:17) at Parser.parseExprAtom (C:\Users\daiki\my-project\node_modules\vue-template-es2015-compiler\buble.js:4372:24) @ ./src/App.vue 11:0-238 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
App.vue
1 <template> 2 <div id="app"> 3 <h1>ToDoManagement</h1> 4 <form> 5 <input type="text" v-model="text-input"> 6 <input type="button" v-on:click="insert-button" name="登録"> 7 <p><span>{{textInput.length}}</span>文字</p> 8 9 </form> 10 </div> 11 </template> 12 13 <script> 14 export default { 15 name: 'app', 16 data () { 17 return { 18 textInput: '' 19 } 20 }, 21 methods: { 22 insertButton () { 23 if (this.textInput === '') return 24 } 25 } 26 } 27 </script> 28 29 <style lang="scss"> 30 #app { 31 font-family: 'Avenir', Helvetica, Arial, sans-serif; 32 -webkit-font-smoothing: antialiased; 33 -moz-osx-font-smoothing: grayscale; 34 text-align: center; 35 color: #2c3e50; 36 margin-top: 60px; 37 } 38 39 h1, h2 { 40 font-weight: normal; 41 } 42 43 ul { 44 list-style-type: none; 45 padding: 0; 46 } 47 48 li { 49 display: inline-block; 50 margin: 0 10px; 51 } 52 53 a { 54 color: #42b983; 55 } 56 </style>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
フレームワーク:Vue.js
node -v:v8.11.4
npm -v:5.6.0
vue --version:2.9.6
babel-loader 6.4.1 6.4.1
bootstrap-vue 1.5.1 1.5.1
css-loader 0.28.11 0.28.11
file-loader 1.1.11 1.1.11
sass-loader 6.0.7 6.0.7
style-loader 0.19.1 0.19.1
vue-loader 13.7.3 13.7.3
webpack 3.12.0 3.12.0
webpack-dev-server 2.11.3 2.11.3
回答1件
あなたの回答
tips
プレビュー