在Laravel Vue项目中使用jQuery在儿童vue组件中使用jQuery的问题
我有一个使用VUE组件的Laravel 9 + VUE 2.6项目。 我通过$ .ajax加载数据中的数据，并在父组件中使用jQuery，我使用以下内容导入jQuery，
<script>
import $ from 'jquery';
export default {
....
我在create（）挂钩中进行ajax调用以加载父级的数据，并且它可以正常工作美好的。
在单击父组件中的按钮时，我会显示一个子组件，这是一个引导模式窗口。在子组件中，我也通过$ .ajax（）将一些数据加载到创建（）挂钩中。但是，它显示了一个错误消息：
TypeError: $.ajax is not a function
at VueComponent.created (app.js:11936:7)
当然，我没有获得儿童组件的所需数据。但是，令人惊讶的是，使用jQuery的子组件的挂钩（）挂钩中的以下代码都可以正常工作，并且显示了模态窗口：
mounted(){
this.openModal();
},
methods: {
openModal () {
$('#noteCreateModal').modal({
backdrop: 'static',
keyboard: false
})
$('#noteCreateModal').modal('show')
},
即使我在子组件中导入jQuery，我仍然会遇到相同的错误（TypeError：$ .ajax不是函数）。
我还想补充说，我在view/layouts/app.blade.php for Bootstrap中包括jQuery。我不知道某处是否有冲突。
<!-- Bootstrap.js and popper.js Required for certain bootstrap components -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
有什么建议，如何解决此问题？ 感谢您的帮助。
I have a Laravel 9 + Vue 2.6 project that uses vue components.
I load data in the parent component through $.ajax, and to use jQuery in the parent component, I use the following to import jQuery
<script>
import $ from 'jquery';
export default {
....
I make an ajax call in the create() hook to load data for the parent component, and it works fine.
On clicking a button in the parent component, I display a child component, which is a bootstrap modal window. In the child component too, I load some data in the created() hook through $.ajax(). However, it displays an error message:
TypeError: $.ajax is not a function
at VueComponent.created (app.js:11936:7)
Of course, I don't get the desired data for the child component. However, surprisingly, the following code in the mounted() hook of the child component, which uses jQuery, works fine, and it displays the modal window:
mounted(){
this.openModal();
},
methods: {
openModal () {
$('#noteCreateModal').modal({
backdrop: 'static',
keyboard: false
})
$('#noteCreateModal').modal('show')
},
And, even if I import jQuery in the child component, I still get the same error (TypeError: $.ajax is not a function).
I also want to add that I am including jquery in views/layouts/app.blade.php for bootstrap. I don't know if there is a conflict somewhere.
<!-- Bootstrap.js and popper.js Required for certain bootstrap components -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Any suggestion, how to fix this issue?
Thanks for your help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是我使用了jQuery的“细长”版本，而不是常规版本。为了解决该问题，我更改了jQuery版本：
此外，在VUE组件中（父母和子女）中，无需从'jQuery''; 导入
。The issue is that I used the 'slim' version of jQuery instead of the regular one. To fix the issue, I changed the jQuery version:
Besides, there was no need to use
import $ from 'jquery';in Vue components (parent as well child).