javascript - Vue.js 脚本在 Laravel 5.5 中不执行任何操作

Question

当有人点击 + 号时，我试图将新的文本字段添加到现有表单中。 这在我创建的代码片段中运行良好。但它在我的 Laravel 5.5 站点中不起作用。

我的控制台没有任何错误。

HTML 进入 create.blade.php，vue 脚本进入 addFlavor.vue 我是我的 app.js 我把:

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

// addFlavor.vue
new Vue({
    el: '#vue',
        data() {
            return {
    	        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 的建议)。

将该文件中的代码更改为:

export default {
    name: 'add-flavor',

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

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

更改app.js中的代码到

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

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

将以下行添加到 webpack.min.js : mix.js('resources/assets/js/app.js', 'public/js');并包括 app.js通过 <script src="{{ mix('/js/app.js') }}"></script> 在您的 Blade 布局文件中.

从您的 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 .这应该构建所有需要的模块。