Vue.js :「npm run dev」実行時にエラーが発生し画面が表示されない

Question

現象

いつもお世話になっております。
現在フレームワーク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

Comments

[spookybird]

このエラーからでは、./src/App.vue のどこかで代入の右辺がおかしいよってことしかわからないです。

Answer 1

parcelで試してみたら同じようなエラー出たので、そこから調べた限り

      <input type="text" v-model="textInput"> 

にしたらビルドはできた(表示確認まではしてないです・・・)

Comments

[pokemn]

無事現象の方治りました!
ありがとうございます。