使用 JavaScript..VueJs 更新 Buefy 组件

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' 属性并更新 json 对象 class 设置为 true。所以我的 Buefy 组件将如下所示：

 <button class="button is-dark alt-dark" slot="trigger">
    <b-icon ref="bellIcon" icon="bell" :class="{ 'has-update-mark' : true }"></b-icon>
 </button>

我试过像这样删除 pack 属性：

 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"

所以，我不知道如何修改 :class 或 pack 属性。如何在 javascript 中修改它们？特别是 :class 属性。当我检查 "bellIcon" ref 时，我什至没有在对象列表中看到它。所以我真的最想要那个。谢谢

Answer 1

切勿以这种方式改变道具。如果您需要为子组件提供动态道具，请传递一个反应式实例。查看代码以获得进一步的解释。

Vue.use(Buefy, {
  defaultIconComponent: 'vue-fontawesome',
  defaultIconPack: 'fas',
});

new Vue({
  el: "#app",
  data() {
   return {
     pack: "fas", // "pack" is reactive 
    };
  },
  methods: {
   toggleIconFontType() {
        // here the "pack" data is changed
     this.pack = this.pack === "fas" ? "far" : "fas";
      console.info("Icon Pack Changed", {pack: this.pack});
    }
  }
})

<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">
  <!-- when this button is clicked, "toggleIconFontType" is invoked   -->
  <button @click="toggleIconFontType">Click Me</button>
  <button class="button is-dark alt-dark" slot="trigger">
  <!-- Here i am binding pack props with reactive data "pack"  -->
  <b-icon ref="bellIcon" :pack="pack" icon="bell" :class="{ 'has-update-mark' : false }"></b-icon>
</button>
</div>

使用 JavaScript..VueJs 更新 Buefy 组件

Update Buefy component using JavaScript..VueJs

javascript

buefy