Question

我收到很多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>

如何摆脱这些错误？

Answer 1

只有当我看到一个值被声明为常量时，才会出现这种情况，默认情况下它们是只读的。

const myVar = 'this is read only';

myVar = 'I wont be set'; // [Vue warn]: myVar is readonly.


let myVar2 = 'I can be replaced';

myVar2 = 'I will be the new value';

除此之外，您提供的源代码中没有任何内容可以洞悉该错误，因为该问题是从 src / components / Display.vue 内的代码中获取的？

Answer 2

在追踪了一个小时之后，我意识到我拥有imported的组件也正在访问Vue。该文件的顶部是import Vue from 'vue/dist/vue.esm'。其他所有文件都只是在做import Vue from 'vue'，这就是我双重导入的来源。

不同的javascript打包程序具有解决重复项的不同方法。对于WebPack，在依赖项导入Vue的不同实例的情况下，Resolve Configuration可能会有所帮助。

Answer 3

这也可能是一个Webpack问题，该组件需要列入白名单。更多信息in this answer。

Answer 4

这是我的情况（https://stackoverflow.com/a/62262296/4202997），但为了节省您的时间，在此我重复一下：我正在从CDN导入vue。我只是删除了脚本，问题就解决了。

Vue警告$ listeners和$ attrs为只读

4 个答案: