В Vue, как вы хотите добавить стили к этому компоненту вкладок и удалить стили, добавленные к другим компонентам вкладок?

Question

Что делать в Vue, если я хочу щелкнуть по компоненту, чтобы добавить стили к этому компоненту и очистить дополнительные стили, которые ранее были выбраны в других компонентах вкладок?Заранее спасибо!

Вот код подкомпонента

<template>
   <div :class="tabStyle" :style="boxstyle"     @click="tabClick(name)">
     {{name}}
     <div class="selected-icon" v-show="isSelected"></div> <!--selected styles-->
     <div class="tick" v-show="isSelected"></div>   <!--selected styles-->
   </div>
</template>

<script>
  export default {
  name: "tabbox",
  props: {
    name: {
      type: String,
      default: ""
    },
    boxstyle: {
     type: Object,
     defalult: {}
   }
 },
data() {
    return {
      isSelected: false,
      tabStyle: {
        "selected-box": false,
        "unselected-box": true
      }
    };
},
methods: {
    tabClick(name) {
      this.isSelected = true;         
      this.borderChange("selected-box","unselected-box")//style add
      this.$emit("getTabName", name);
    },
    borderChange(first, second) {
      this.tabStyle[first] = true;
      this.tabStyle[second] = false;
    }
  }
};
</script>


 <style lang="scss" scoped>
.tab-box {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 1%;
  font-size: 1rem;
  width: 20%;
}
.unselected-box {
  border: solid 1px #b9a7a76b;
  @extend .tab-box;
}
.selected-box {
  border: solid 1px #5ddb14;
  @extend .tab-box;
}
.selected-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-color: #5ddb14 transparent;
  border-width: 0 0 20px 25px;
  border-style: solid;
}

.tick {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  &::after {
    content: "✓";
  }
}
</style>

И это код родительского компонента

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="styles" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {}
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories;
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>

Просто оставьте стиль включеннымвкладку, которую я щелкаю прямо сейчас и удаляю стиль, который я щелкнул ранее.

Answer 1

Одним из возможных решений является получение boxstyle из метода Vue:

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="getTableStyle(_item.name)" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {},
      activeTabName: ''
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories; 
    // you might want to set default activeTabName here or in Vue's watch
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
      this.activeTabName = name
    },
    getTableStyle (name) {
      if (name === this.activeTabName) {
        return this.allStyles
      }
      return {}
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>