Laravel Dusk VueJS SPA router-view注入的组件

huangapple go评论74阅读模式
英文:

Laravel Dusk VueJS SPA router-view injected components

问题

我使用`<router-view>`根据路由来注入组件。现在我想在Laravel Dusk中进行vue-assertions。

```html
<router-view :key="$route.fullPath" :dusk="$route.name"></router-view>

但是当我在我的订单索引路由上执行 ->assertVue('field', 'value', '@indexOrder') 时,我收到以下错误:

Facebook\WebDriver\Exception\UnexpectedJavascriptException: javascript error: Cannot read property '__vue__' of null

当然,我确保了路由的名称是 indexOrder 并且正确放在 router-view 组件的 dusk 属性中。我该如何修复这个问题?


<details>
<summary>英文:</summary>

I use `&lt;router-view&gt;` to inject components based on the route. I want to make vue-assertions in Laravel Dusk now.

```html
&lt;router-view :key=&quot;$route.fullPath&quot; :dusk=&quot;$route.name&quot;&gt;&lt;/router-view&gt;

But when I do -&gt;assertVue(&#39;field&#39;, &#39;value&#39;, &#39;@indexOrder&#39;) on my order index route, I get this error:

Facebook\WebDriver\Exception\UnexpectedJavascriptException: javascript error: Cannot read property &#39;__vue__&#39; of null

Of course, I made sure that the route's name is indexOrder and is correctly put in the dusk-attribute of the router-view component. How can I fix that?

答案1

得分: 1

这不完全是一个答案,但可以帮助你朝正确的方向前进。

当你在浏览器控制台中运行以下命令在你正在测试的路由上时,你会看到一个 $children 变量。

document.querySelector('body [dusk="YOUR_ROUTE_NAME"]').__vue__;

上述命令是 Dusk 在其 MakesAssertions 特性下的 vueAttribute 方法中执行的。这个 $children 变量包含了路由加载的所有组件,因此你需要创建一些新的方法和断言来支持 Dusk 中的 vue-router。

英文:

While this is not exactly an answer, it can help move you in the right direction.

When you run the following command in your browser console on the route you're testing, you'll see a $children variable.

document.querySelector(&#39;body [dusk=&quot;YOUR_ROUTE_NAME&quot;]&#39;).__vue__;

The above command is what Dusk executes in its MakesAssertions trait under the vueAttribute method. This $children variable holds all of your components loaded by the router, so you'll have to create some new methods and assertions to support vue-router in Dusk.

huangapple
  • 本文由 发表于 2020年1月3日 17:51:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/59576350.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定