Javascript Vue.js脚本在Laravel 5.5中不起任何作用

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

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

HTML进入create.blade.php，vue脚本进入addFlavor.vue 我在我的app.js中输入：

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

//addFlavor.vue
新Vue({
el:“#vue”，
数据（）{
返回{
formdata:[]，
口味：[{
名称：“”，
百分比：“”，
}]
}
},
方法：{
addAroma:function（）{
这是推({
名称：“”，
百分比：“”
})
}
},
})

芳香1
%
+

export default {
    name: 'add-flavor',

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

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

{{$data | json}

将文件

addFlavor.vue

重命名为

addFlavor.vue

（遵循VueJS的建议）

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

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

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

将

app.js

中的代码更改为

<!-- 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>

将以下行添加到

webpack.min.js

：

mix.js（'resources/assets/js/app.js'，'public/js'）

并通过

在刀片布局文件中包含

app.js

从HTML文件中删除手动VueJS导入。它不是必需的，因为它已经在package.json中定义，并且将通过NPM安装。此外，您还导入了VueJS的1.x版本，但最新版本是2.5.x。我强烈推荐这个

芳香1
%
+

export default {
    name: 'add-flavor',

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

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

{{$data | json}

---

如上所述，如果尚未完成，请通过

npm install

或

warn install

安装所有节点依赖项，然后运行

node run watch

。这将构建所有需要的模块

查看dev tools的网络选项卡以检查是否有丢失的资源我在那里没有看到addFlavor.vue，但我想这是正常的。当我将HTML代码移动到.vue文件中的模板并添加到我的create.blade.php中时，我得到以下错误：app.js:32397[vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项。（在中找到）表示未加载.vue文件，vue找不到该组件。只需将其放在.js文件而不是.vue中，并将其包含在页脚处即可。我将该文件重命名为VueJS建议，并将我的AddFlavor.vue更改为您的版本。这就是所需要的。谢谢你清楚的解释。我正在使用Vue，JS2.5.9。必须已将错误的文件导入到代码段中。