vue.js - Vue 警告 $listeners 和 $attrs 是只读的
问题描述
我收到很多 Vue 警告,说 $listeners 是只读的,或者 $attrs 是只读的,并且与不同的 Bootstrap 项目或 .
例如:
[Vue warn]: $attrs is readonly.
found in
---> <BDropdown>
<Display>
<App>
<Root>
我很确定这与以某种方式加载 Vue 实例两次有关,但我真的不知道如何以其他方式执行此操作,以便路由仍然有效。
在我的 main.js 中,代码如下:
import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase';
import './components/firebaseInit';
import store from './store';
import { i18n } from './plugins/i18n.js'
import BootstrapVue from 'bootstrap-vue'
import VueCarousel from 'vue-carousel';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
Vue.use(VueCarousel);
let app;
firebase.auth().onAuthStateChanged(user => {
if(!app) {
app = new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})
}
})
我的 router/index.js 代码如下所示:
import Vue from 'vue'
import Router from 'vue-router'
import firebaseApp from '@/components/firebaseInit'
Vue.use(Router)
let router = new Router({
routes: [
{
path: '/',
name: 'display',
component: Display
},
...
]
})
// Nav Guards
router.beforeEach((to, from, next) => {
// check for requiredAuth
if(to.matched.some(record => record.meta.requiresAuth)) {
// check if NOT logged in
...
} else {
// proceed to route
next();
}
} else {
next();
}
})
export default router;
由于示例错误来自 Display.vue,以下是该代码的摘录:
<template>
<div>
<b-row>
<b-input-group prepend="Category">
<b-dropdown v-bind:text="currentCategory">
<b-dropdown-item @click="categroyChanged('All')">All</b-dropdown-item>
<b-dropdown-item v-for="c in categories" v-bind:key="c" @click="categoryChanged(c)">{{c}}</b-dropdown-item>
</b-dropdown>
</b-input-group>
</b-row>
<div class="row" v-for="i in Math.ceil(products.length / 3)" v-bind:key="i">
<div v-for="product in products.slice((i - 1) * 3, i * 3)" v-bind:key="product.id" class="col-md-4 col-6 my-1">
<b-card
v-bind:img-src="product.thumbUrl"
img-fluid
img-alt="image"
overlay>
<div slot="footer">
<small class="text-muted">{{product.name}}<br />{{product.price}} VND</small>
</div>
<router-link v-bind:to="{name: 'view-product', params: {product_id: product.product_id}}" class="secondary-content">
<i class="fa fa-eye"></i>
</router-link>
<router-link v-if="isEmployee" v-bind:to="{name: 'edit-product', params: {product_id: product.product_id}}" class="secondary-content">
<i class="fa fa-pencil"></i>
</router-link>
<button @click='addToCart(product)' class='button is-info'><i class="fa fa-cart-arrow-down"></i></button>
</b-card>
</div>
</div>
</div>
</template>
<script>
import firebaseApp from './firebaseInit'
import { mapActions } from 'vuex'
export default {
name: 'display',
data () {
return {
txtSearch: null,
isLoggedIn: false,
currentUser: false,
isEmployee: false,
products: []
}
},
beforeMount () {
var db = firebaseApp.firestore();
db.collection('products').get().then(querySnapshot => {
querySnapshot.forEach(doc => {
const data = {
'product_id': doc.id,
'article_number': doc.data().article_number,
'barcode': doc.data().barcode,
'category': doc.data().category,
'colour': doc.data().colour,
'description': doc.data().description,
'name': doc.data().name,
'name_ger': doc.data().name_ger,
'price': doc.data().price,
'size': doc.data().size,
'thumbUrl': doc.data().thumbUrl,
}
this.products.push(data)
})
})
}
},
methods: {
...mapActions(['addToCart']),
... many methods ...
}
}
</script>
我怎样才能摆脱这些错误?
解决方案
发生这种情况的常见原因有两个:
多个 Vue 位置
正如其他人所说,这可能是由于您从不同文件中导入 Vue 的位置相互矛盾。因此,例如,您可能同时拥有这两者import Vue from 'vue'
,也可能import Vue from 'vue.runtime.esm'
在您的代码中。
但这可能会导致多个 Vue 实例,这将导致这些错误。
在这种情况下,解决方案是import Vue from 'vue'
在代码中的任何地方使用,然后在打包系统(webpack、Parcel、rollup 等)中使用别名。中的一个示例webpack.config.js
,或者 webpack.renderer.config.js
如果您使用的是 Electron,将是:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
// ...
}
在 Vue 文档中查看更多示例。
白名单
例如,这也可能是因为需要将 Vue 列入白名单,而不是externals
webpack 中的一个。
值得注意的是,Bootstrap Vue 从 2.0 到更高版本(肯定是 2.15(可能更早))的更改导致了同样的问题发生。
module.exports = {
// ...
externals: [
'fast-glob',
'jquery',
'bunyan',
'yaml',
'vue', // Remove this
'bootstrap-vue', // Remove this
// ...
}
推荐阅读
- javascript - 占位符不改变表单中的值
- c# - CSV 文件的 StreamReader ReadLine()
- python - 有效的 JSON 可以是无效的 Python 吗?
- javascript - React-Native,重新加载应用程序后错误消失,但随后再次出现
- r - ggplot中x轴下方的表格
- ggplot2 - 条形图中的缺失值
- r - 如何根据 R 中的行值组合创建新变量(列)?
- simulation - ResourceTaskStart 问题由于多个资源在一次占用中
- java - 将解析的 JSONArray 加载到 recyclerView
- swift - 如何更新视图中结构的值