VUE2js: Как сделать так, чтобы компонент повторно рендерился после смены реквизита? - PullRequest
Новая
       11

VUE2js: Как сделать так, чтобы компонент повторно рендерился после смены реквизита?

0 голосов
/ 27 апреля 2018

Вью новичок здесь. Все просто: 

<template>
 <btn :color="color" @click="toggleColor">{{btnmsg}}</btn>
</template>

<script>
import { Btn } from 'chico'
export default = {
 name: 'AButton',
 componenents: {
  Btn
 },
 data () {
  return {
   btnmsg: 'Legia pany'
   colors: ['blue', 'black', 'green', 'organge', 'teal', 'cyan', 'yellow', 'white'],
   color: 'red'
  }
},
methods: {
 toggleColor () {
  this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))]
 }
}
 </script>

Btn из ChicoFamily выглядит примерно так 

  <template>
   <button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role" ">
    <slot></slot>
   </button>
  </template>

<script>
import classNames from 'classnames';
 export default {
  props: {
   tag: {
    type: String,
    default: "button"
   },
   color: {
    type: String,
    default: "default"
...it takes hellotta props... 
},
data () {
 return {
  className: classNames(
    this.floating ? 'btn-floating' : 'btn',
    this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color,
...classes derived from these props...
   )
  };
 }
};
</script>

Да, это кнопка, которая при нажатии должна изменить свой цвет. Нажатие на него действительно изменяет пропущенную опору, но на самом деле кнопка не перерисовывается. Я задаю этот вопрос, потому что мне кажется, что в механике Vue2 есть нечто большее, что ускользает от меня.

Почему пропуск другой опоры не приводит к повторному рендерингу этой кнопки «милый ребенок»? Как правильно это сделать?

Бест, Пако

[править:] Btn берет свой цвет из классов Bootstrap, полученных из реквизита. Может ли быть так, что он получает правильный реквизит, но механика className не догоняет?

1 Ответ

0 голосов
/ 27 апреля 2018

Ваш цвет не реагирует, потому что вы установили его как data, а не как computed.

Как вы это сделали, className будет установлен один раз, когда будет создан экземпляр.

Чтобы сделать className переоценку каждый раз, когда вы меняете один из реквизитов в состоянии, вам нужно будет сделать computed property из этого:

Btn компонент: 

export default {
  props: {
    [...]
  },
  computed: {
    className() {
      return classNames(
        this.floating ? 'btn-floating' : 'btn',
        this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' :   this.transparent ? '' : 'btn-' + this.color);
      );
    },
  },
}
...