Vue.jsスクリプトはLaravel 5.5で何もしません

Question

誰かが+記号をクリックしたときに、既存のフォームに新しいテキストフィールドを追加しようとしています。 これは私が作成したコードスニペットでうまくいきます。しかし、私のLaravel 5.5サイトでは動作しません。

私のコンソールに何もエラーはありません。

HTMLはcreate.blade.phpに入り、VUEスクリプトは私のapp.js I'n私が入れaddFlavor.vue にある：

Vue.component('addflavor-component', require('./components/addFlavor.vue')); 

// addFlavor.vue 
 
new Vue({ 
 
    el: '#vue', 
 
     data() { 
 
      return { 
 
    \t   formdata: [], 
 
       flavors: [{ 
 
        name: '', 
 
        percentage: '', 
 
       }] 
 
      } 
 
     }, 
 
     methods: { 
 
      addAroma: function(){ 
 
       this.flavors.push({ 
 
        name: '', 
 
        percentage: '' 
 
       }) 
 
      } 
 
     }, 
 
     
 
    })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script> 
 
<!-- create.blade.php --> 
 
<div id="vue"> 
 
    
 
    <div class="form-row align-items-left" v-for="flavor in flavors"> 
 

 
     <div class="col form-inline"> 
 
      <label class="sr-only" for="flavorname">Aroma 1</label> 
 
      <div class="form-group"> 
 
       <input type="text" 
 
         class="form-control mb-2 mb-sm-0" 
 
         id="flavorname" 
 
         v-model="flavor.name"> 
 
      </div> 
 
      <div class="input-group md-2 mb-sm-0"> 
 
       <input type="text" 
 
         class="form-control" 
 
         id="percentage" 
 
         v-model="flavor.percentage"> 
 
           
 
       <div class="input-group-addon">%</div> 
 
      </div> 
 
      <button class="btn btn-success mt-5 mb5" @click="addAroma">+</button> 
 
     </div> 
 
</div> 
 
    
 
    <hr> 
 
    
 
    <pre> 
 
    {{ $data | json }} 
 
    </pre> 
 
    
 
</div>

方法をLaravel 5.5サイトでこのスクリプトを正しく使用できますか？

Answer 1

ファイルの名前をaddFlavor.vueからAddFlavor.vue（VueJSの推奨事項に従う）に変更します。

変更に、そのファイル内のコード：ブレード・レイアウトファイルにapp.jsを mix.js('resources/assets/js/app.js', 'public/js');をして、次のとおりです

export default { 
    name: 'add-flavor', 

    data() { 
     return { 
      formdata: [], 
      flavors: [{ 
       name: '', 
       percentage: '', 
      }] 
     } 
    }, 

    methods: { 
     addAroma() { 
      this.flavors.push({ 
       name: '', 
       percentage: '' 
      }) 
     } 
    }, 
} 

変更は

import AddFlavor from './components/AddFlavor.vue'; 

const app = new Vue({ 
    el: '#vue', 
    components: { 
     'addflavor': AddFlavor, 
    } 
}); 

からapp.jsのコードはwebpack.min.jsに次の行を追加します。 <script src="{{ mix('/js/app.js') }}"></script>経由

HTMLファイルからVueJSの手動インポートを削除します。すでにpackage.jsonで定義されているので不要で、NPM経由でインストールされます。さらに、VueJSのバージョン1.xをインポートしますが、最新バージョンは2.5.xです。私は強くこれをお勧めします。

<!-- create.blade.php --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 

<div id="vue"><!-- <-- This could go to your main layout file --> 
    <add-flavor inline-template> 
     <div class="form-row align-items-left" v-for="flavor in flavors"> 
      <div class="col form-inline"> 
       <label class="sr-only" for="flavorname">Aroma 1</label> 
       <div class="form-group"> 
        <input type="text" class="form-control mb-2 mb-sm-0" id="flavorname" v-model="flavor.name"> 
       </div> 
       <div class="input-group md-2 mb-sm-0"> 
        <input type="text" class="form-control" id="percentage" v-model="flavor.percentage"> 

        <div class="input-group-addon">%</div> 
       </div> 
       <button class="btn btn-success mt-5 mb5" @click="addAroma">+</button> 
      </div> 
     </div> 
    </add-flavor> 
    <hr> 

    <pre>{{ $data | json }}</pre> 

</div> 

まだ行っていない場合は、npm installまたはyarn installを経由して、すべてのノードの依存関係をインストールし、その後node run watchを実行して、言いました。これにより、必要なすべてのモジュールが構築されます。