亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用腳本更新布菲組件。維尤斯

使用腳本更新布菲組件。維尤斯

蝴蝶不菲 2022-09-29 15:53:15
我的 .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”引用時,我甚至沒有在對象列表中看到它。所以我真的最想要那個。謝謝
查看完整描述

1 回答

?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

永遠不要以這種方式改變道具。如果需要向子組件提供動態 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>


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 86 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號