Обновите компонент Buefy с помощью JavaScript..VueJs

В моем файле .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, для которого установлено значение 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" исх. Так что я действительно хочу этого больше всего. Спасибо


javascript buefy
person BoundForGlory    schedule 10.06.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Никогда не изменяйте таким образом реквизит. Если вам нужно предоставить динамические свойства дочернему компоненту, передайте реактивный экземпляр. Взгляните на код для дальнейшего объяснения.

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>

person Kharel    schedule 11.06.2020