Vue 警告 $listeners 和 $attrs 是只读的
[英] Vue warn $listeners and $attrs is readonly
本文介绍了Vue 警告 $listeners 和 $attrs 是只读的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我收到很多 Vue 警告，说 $listeners 是只读的或 $attrs 是只读的，并且与不同的 Bootstrap 项目或 .
例如:
[Vue 警告]:$attrs 是只读的.在发现---><B下拉菜单><显示><应用程序><根>
我很确定这与以某种方式两次加载 Vue 实例有关，但我真的不知道如何以其他方式做到这一点，以便路由仍然有效.
在我的 main.js 中，代码如下:
从'vue'导入Vue从'./App'导入应用程序从'./router'导入路由器从'firebase'导入firebase；导入'./components/firebaseInit';从./store"导入商店；从 './plugins/i18n.js' 导入 { i18n }从bootstrap-vue"导入 BootstrapVue从 'vue-carousel' 导入 VueCarousel；导入'bootstrap/dist/css/bootstrap.css'导入'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(BootstrapVue);Vue.use(VueCarousel);让应用程序；firebase.auth().onAuthStateChanged(user => {如果(！应用程序){应用程序 = 新的 Vue({el: '#app',路由器，店铺，i18n，组件:{应用}，模板:'<应用程序/>'})}})
我的 router/index.js 代码如下所示:
从'vue'导入Vue从vue-router"导入路由器从@/components/firebaseInit"导入 firebaseAppVue.use(路由器)让路由器 = 新路由器({路线: [{小路: '/'，name: '显示',组件:显示器},...]})//导航卫士router.beforeEach((to, from, next) => {//检查 requiredAuthif(to.matched.some(record => record.meta.requiresAuth)) {//检查是否未登录...} 别的 {//继续路由下一个();}} 别的 {下一个();}})导出默认路由器；
由于示例错误来自 Display.vue，以下是该代码的摘录:
<div><b行><b-input-group prepend="类别"><b-dropdown v-bind:text="currentCategory"><b-dropdown-item @click="categroyChanged('All')">All</b-dropdown-item><b-dropdown-item v-for="c in category" v-bind:key="c" @click="categoryChanged(c)">{{c}}</b-dropdown-item></b-下拉菜单></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卡v-bind:img-src="product.thumbUrl"img-fluidimg-alt="图像"叠加><div slot="footer"><small class="text-muted">{{product.name}}<br/>{{product.price}} VND</small>
<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 v-if="isEmployee" v-bind:to="{name: 'edit-product', params: {product_id: product.product_id}}" class="secondary-content"><i class="fa fa-pencil"></i></路由器链接><button @click='addToCart(product)' class='button is-info'><i class="fa fa-cart-arrow-down"></i></button></b-card>
<脚本>从 './firebaseInit' 导入 firebaseApp从 'vuex' 导入 { mapActions }导出默认{name: '显示',数据 () {返回 {txt搜索:空，isLoggedIn: 假,当前用户:假，isEmployee:假，产品: []}},之前挂载(){var db = firebaseApp.firestore();db.collection('products').get().then(querySnapshot => {querySnapshot.forEach(doc => {常量数据 = {'product_id': doc.id,'article_number': doc.data().article_number,'条码':doc.data().barcode,类别":doc.data().category,'颜色': doc.data().colour,'描述':doc.data().description,'name': doc.data().name,'name_ger': doc.data().name_ger,'价格': doc.data().price,'大小': doc.data().size,'thumbUrl': doc.data().thumbUrl,}this.products.push(数据)})})}},方法: {...mapActions(['addToCart']),……很多方法……}}
我怎样才能摆脱这些错误?
解决方案
出现这种情况的常见原因有两个:
多个 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 = {//...解决: {别名:{'vue$': 'vue/dist/vue.esm.js'//'vue/dist/vue.common.js' 用于 webpack 1}}//...}
请参阅 Vue 文档中的更多示例.
白名单
这也可能是因为需要将 Vue 列入白名单，例如 not 在 webpack 中的 externals 之一.
值得注意的是，Bootstrap Vue 从 2.0 到更高版本的变化，肯定是 2.15(可能更早)，导致了同样的问题发生.
module.exports = {//...外部:['快速球'，'jquery','班扬','yaml','vue',//删除这个'bootstrap-vue',//删除这个//...}
I am getting a lot of Vue warnings saying $listeners is readonly or $attrs is readonly and related to different Bootstrap items or to .
For example:
[Vue warn]: $attrs is readonly.
found in
---> <BDropdown>
<Display>
<App>
<Root>
I am very sure it has something to do with loading the Vue instance twice somehow, but I don't really know, how to do it any other way, so that the routing still works.
In my main.js the code is as follows:
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/>'
})
}
})
My router/index.js code looks as follows:
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;
As the sample errors come from Display.vue, here is an extract of that code:
<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>
How can I get rid of these errors?
解决方案
There are two common reasons why this can happen:
Multiple Vue Locations
This can be due to contradictory locations of where you are importing Vue from, in different files, as others have said. So you might have both import Vue from 'vue' and perhaps import Vue from 'vue.runtime.esm' in your code, for example.
But this can result in multiple instances of Vue, which will cause these errors.
The solution in this case is to use import Vue from 'vue' everywhere in your code, and then alias it in your packaging system (webpack, Parcel, rollup etcetera). An example of this in webpack.config.js, or webpack.renderer.config.js if you're using Electron, would be:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
// ...
}
See more examples in the Vue documents.
White Listing
This can also be because of a need for Vue to be whitelisted as not one of the externals in webpack, for example.
It is worth noting that changes in Bootstrap Vue from 2.0 to a later version, definitely by 2.15 (and possibly earlier), caused this same problem to occur.
module.exports = {
// ...
externals: [
'fast-glob',
'jquery',
'bunyan',
'yaml',
'vue', // Remove this
'bootstrap-vue', // Remove this
// ...
}
这篇关于Vue 警告 $listeners 和 $attrs 是只读的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
