Question

我想引用类似于以下链接的组件Vue：https://jsfiddle.net/xmqgnbu3/1/。

但是，在此代码中，代码组件和js代码在同一页面中。我将laravel与vue一起使用，并且组件位于另一个文件夹中（链接：https://ibb.co/g3CvHz6）

我尝试了所有这一切，但是在“要求”中的“导入”中出现错误：

@section('contenido')

<!-- CSRF Token --> 
<meta name="csrf-token" content="{{ csrf_token() }}">

<div id="app" class="container"> 
    <matricula ref="matri"></matricula> 
</div> 
<input type="hidden" id="csrf_token" value="{{ csrf_token() }}" />
<script src="{{ elixir('js/app.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script>

import MatriculaComponent from '../js/components/MatriculaComponent.vue';
let MatriculaComponent=require('../js/components/MatriculaComponent.vue');
var vm = new Vue({ el: '#app', components: { matricula } });

var vm=$("#app")
function createItem(){
    //this.$refs["matri"].Prueba();
    //vm.$refs.matri.Prueba();
    //vm['my-component'].Prueba();
    console.log("la referencia: "+this.$refs.matri.Prueba())
    //this.$refs.matricula.Prueba();
}
</script>

@endsection

我希望得到您的帮助。谢谢

Answer 1

要点是制作一个vue组件，并在那里设置模板和脚本。然后，在编译后，您可以将所需的组件名称放入Blade中。

FMI，您必须阅读How to create and deal with vue component in laravel

如何在脚本Laravel Blade中导入组件Vue

1 个答案: