使用脚本更新布菲组件。维尤斯

Question

我的 .vue 文件上有以下 Buefy 组件：

 <button class="button is-dark alt-dark" slot="trigger">

  <b-icon ref="bellIcon" pack="far" icon="bell" :class="{ 'has-update-mark' : false }"></b-icon>

</button>

我想删除“pack='far'属性，并更新该类设置为 true 的 json 对象。因此，我的 Buefy 组件将如下所示：

 <button class="button is-dark alt-dark" slot="trigger">

    <b-icon ref="bellIcon" icon="bell" :class="{ 'has-update-mark' : true }"></b-icon>

 </button>

我试图删除包属性，如下所示：

 this.$refs.bellIcon.pack = ""

但是我得到了以下错误：

  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: 

  "pack"

所以，我不知道如何修改：类或包属性。如何在脚本中修改它们？尤其是 ：类属性。当我检查“bellIcon”引用时，我甚至没有在对象列表中看到它。所以我真的最想要那个。谢谢

Answer 1

永远不要以这种方式改变道具。如果需要向子组件提供动态 props，请传递反应式实例。查看代码以获取进一步说明。Vue.use(Buefy, {&nbsp; defaultIconComponent: 'vue-fontawesome',&nbsp; defaultIconPack: 'fas',});new Vue({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; pack: "fas", // "pack" is reactive&nbsp;&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; toggleIconFontType() {&nbsp; &nbsp; &nbsp; &nbsp; // here the "pack" data is changed&nbsp; &nbsp; &nbsp; &nbsp; this.pack = this.pack === "fas" ? "far" : "fas";&nbsp; &nbsp; &nbsp; console.info("Icon Pack Changed", {pack: this.pack});&nbsp; &nbsp; }&nbsp; }})<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/buefy/0.8.20/buefy.min.js"></script><div id="app">&nbsp; <!-- when this button is clicked, "toggleIconFontType" is invoked&nbsp; &nbsp;-->&nbsp; <button @click="toggleIconFontType">Click Me</button>&nbsp; <button class="button is-dark alt-dark" slot="trigger">&nbsp; <!-- Here i am binding pack props with reactive data "pack"&nbsp; -->&nbsp; <b-icon ref="bellIcon" :pack="pack" icon="bell" :class="{ 'has-update-mark' : false }"></b-icon></button></div>