javascript - VueJs 路由器链接元素出错
问题描述
每次我在 app.blade.php 页面导航栏中单击我的 vuejs router-link 元素之一时,我最终都会在控制台上收到错误,如下所示
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"
found in
---> <RouterLink>
<Root>
下面的代码显示了我如何在导航栏中实现路由器链接。
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@else
<li class="nav-item" id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px; ">
<router-link style="color:black;" :to="{ name: 'home' }">Menu<i class="fa fa-home" style="margin-left:8px;"></i></router-link>
</li>
<li class="nav-item" id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px;">
<router-link style="color:black;" :to="{ name: 'orders' }">Orders <i class="fa fa-coffee" style="margin-left:8px;"></i></router-link>
</li>
<li class="nav-item" id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px;">
<router-link style="color:black;" :to="{ name: 'cart' }">Cart <i class="fa fa-shopping-cart" style="margin-left:8px;"></i></router-link>
</li>
有人可以解释为什么我会收到这个错误吗?
解决方案
您正在尝试更改props
vue 组件中的元素。用于data
该目的。
推荐阅读
- swiftui - SwiftUI - 向视图添加两个手势?
- python-3.x - 我的第一个自定义日志记录处理程序不起作用
- c# - 我们如何确保所有 NUnit [Test] 方法都是公开的?
- scripting - 如何仅在 Doxygen 中为与特定组标签相关的对象/类显示协作图
- python - 如何使用随机起点优化 Tensorflow 2.0 中的层权重
- kubernetes - kubectl get pods 不显示 READY-STATUS-RESTARTS
- forms - 行上的 Symfony 表单主题自定义属性
- google-cloud-platform - 谷歌 bigquery 将表导出到谷歌云存储中的多个文件,有时是一个文件
- plotly - 哪个图表/绘图插件比 ploty 更快?
- python - 如何将 DNF 表达式再次转换为正常的布尔表达式