VUE2js: 소품 변경 후 컴포넌트를 재렌더하는 방법

VUE2js: 소품 변경 후 컴포넌트를 재렌더하는 방법

Vue 초보자입니다.문제는 간단하다.

<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'은 이렇게 되어 있어요

  <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은 소품에서 파생된 부트스트랩 클래스에서 색상을 따왔습니다.제대로 된 소품을 넣었는데 className 메카닉이 따라잡을 수 없는 걸까요?

색상은 리액티브하지 않습니다.이거는 리액티브로 설정하기 때문에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);
      );
    },
  },
}

컴포넌트에 : 키를 설정하는 것이 컴포넌트를 강제로 재렌더하는 가장 좋은 방법입니다.구성 요소를 다시 렌더링해야 하는 경우 키 값을 수정하기만 하면 Vue가 다시 렌더링합니다.

언급URL : https://stackoverflow.com/questions/50060309/vue2js-how-to-have-component-re-render-after-its-props-change