未捕获的类型错误：无法读取未定义的属性 'get' [this.$inertia.get('/idea_details', );在 Vue 组件的 mount()]

Posted 2023-03-14

【中文标题】未捕获的类型错误：无法读取未定义的属性 \'get\' [this.$inertia.get(\'/idea_details\', );在 Vue 组件的 mount()]

【英文标题】：Uncaught TypeError: Cannot read property 'get' of undefined [this.$inertia.get('/idea_details', ); within Vue component's mounted()]未捕获的类型错误：无法读取未定义的属性 'get' [this.$inertia.get('/idea_details', );在 Vue 组件的 mount()]

【发布时间】：2021-07-18 21:50:13

【问题描述】：

我正在尝试使用 laravel/vue 的惯性，并尝试使用以下代码导航到新页面/url：

this.$inertia.get('/idea_details', ); 

出现以下错误：

Uncaught TypeError: Cannot read property 'get' of undefined

大概这意味着它（页面？）不知道“$inertia”是什么——或者不在乎，它不存在。

我在“Dashboard.vue”组件/页面中进行此调用，下面的代码几乎完整：

 41         </div>
 42     </breeze-authenticated-layout>
 43 </template>
 44 
 45 
 46 <script>
 47     import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'
 48 
 49     export default 
 50         components: 
 51             BreezeAuthenticatedLayout,
 52         ,
 53         mounted()
 54             console.log('test from the Dashboard.vue component...');
 55             $(document).ready( function () 
 56                 var table = $('#myTable').DataTable();
 57 
 58                 $('#myTable tbody').on('click', 'tr', function () 
 59                     var data = table.row( this ).data();
 60                     alert( 'You clicked on '+data[0]+'\'s row' );
 61 
 62                     // Uncaught TypeError: Cannot read property 'get' of undefined
 63                     this.$inertia.get('/idea_details', ); 
 64 
 65                  );
 66             );
 67         
 68     
 69 
 70 </script>

我做错了什么？

我是整个堆栈的相对新手，包括 Web 组件和 npm 等，所以很可能我错过了一些非常基本的东西。

这是使用他们的“初学者工具包”之一的 Laravel 8 —— Breeze 和 Intertiajs：

https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation

谢谢！

...补充一点，Chrome 的 Vue 测试版扩展似乎认为它看到/了解 Inertia，正如您在此屏幕截图中看到的那样：

...得到了这个工作的一部分。似乎至少有两个部分我遗漏或做错了：

import 然后声明我要访问的对象（惯性） 下面的代码 sn-p 的第 51 和 57 行。 仅在标签内“export default”的“methods”声明部分中使用——与“mounted”部分相反——我还没有弄清楚。

49 <script>
50     import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'
51     import Inertia from '@inertiajs/inertia'
52 
53 
54     export default 
55         components: 
56             BreezeAuthenticatedLayout,
57             Inertia
58         ,
59         methods: 
60             hi()
61                 // corresponds to 'Route::get('/idea', ...' 
62                 //   in routes/web.php. ie don't use a '/' here
62                 this.$inertia.visit('idea',);

...建议的解决方案是这样的（我想），但它是错误的，或者至少是不正确的：

 58                 $('#myTable tbody').on('click', 'tr', function () 
 59                     var data = table.row( this ).data();
 60                     alert( 'You clicked on '+data[0]+'\'s row' );
 61 
 62                     // Uncaught TypeError: Cannot read property 'get' of undefined
 63                     this.$inertia.get('/idea_details', ); 
 64 
 65                 .bind(this)); // create closure?

这里的“表”是一个 DataTables.net 表。 “数据”是表列的数组，在我的例子中是 3 个：“id”、“代号”、“标语”。现在，无论您单击数据表的哪一行，您都将始终获得该表的第一行/顶行。

【参考方案1】：

答案是找到一种方法来获得适当的范围，它似乎在这里得到了回答：

https://***.com/a/54072713/1965936

...好吧，发现绑定“this”可能是答案的一部分，或者至少暗示了答案，但还不确定如何实际解决这个问题。

...好吧，这可能是一个实际的答案：

187   $( "#myTable tbody" ).on( "click", "tr", thisArg: this, function(event) 
188       let data = myDataTable.row(this).data();
189       console.log(event.data.thisArg); // 'Proxy route:...'
190       event.data.thisArg.modal_title=data.codename;
191       event.data.thisArg.modal_body=data.tagline;
192       event.data.thisArg.showModal=true;
193       event.data.thisArg.hello(); // call your 'hello()' method
194   );

这里的关键是第 188 行的 this 与之前在第 187 行（作为参数）指定的 this 不同。

在这种情况下，破解/修复是使用jQuery '.on()' event handler function 的第三个参数将原始this（组件）作为变量传递——此处指定为“thisArg”。

您还必须将“事件”参数显式命名为“处理程序”函数——这是链接上的官方函数签名：

.on( events [, selector ] [, data ], handler )

data 参数只是一个带有键/值对的对象——无论你想要它/它们是什么。

然后要访问该数据，我在 data 参数中指定键：

event.data.thisArg

thisArg 是我要操作、调用方法等的组件。

当我运行console.log(thisArg) 时，我看到了这个：

Proxy route: ƒ, confirm: ƒ, close: ƒ, cancel: ƒ, …

这大概是我的组件的字符串化版本，confirm、close 和 cancel 是我在组件中列出的前三个 methods()。