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

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, {

  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>