时间戳

首页 > 解决方案 > 按钮单击时的 v-bind 类被删除

vue.js - 按钮单击时的 v-bind 类被删除

问题描述

我遇到了一个奇怪的错误，我不确定它为什么会发生。基本上，如果我将类名作为道具传递给子组件，一旦单击按钮，按钮就会失去其所有布局。如果我在子组件中对类名进行硬编码，则不会发生这种情况。这种行为的原因是什么？

父组件

<button-layout
    btn-type="button"
    btn-class="btn btn-lg btn-primary"
    :btn-text="arrSize.size"
    :key="index"
    v-on:getBtnClicked="testMe($event, index)"
    :is-active="index === btnClicked"
>
</button-layout>

子组件

 <button
        :type="btnType"
        :class="btnClass" //if I move this to class="btn btn-lg btn-primary" the problem doest happen
        v-on:click="returnClickedButton($event)"
        v-bind:class="{active: isActive}">
    {{btnText}}
</button>

标签： vue.js

解决方案

修复了问题。我可以像这样在按钮布局初始化中声明类

<button-layout
  btn-type="button"
  class="btn btn-lg btn-primary" //declaring class in here instead of passing as props
  :btn-text="arrSize.size"
  :key="index"
  v-on:getBtnClicked="testMe($event, index)"
  :is-active="index === btnClicked"
>
</button-layout>

推荐阅读