Vue.js：使用方法切换动态数据的 CSS 类

Posted 2023-03-24

【中文标题】Vue.js：使用方法切换动态数据的 CSS 类

【英文标题】：Vue.js: Toggle CSS class for dynamical data with method

【发布时间】：2019-05-15 23:23:09

【问题描述】：

我有以下代码：

<template>
<div id="projects">
  <Header />
  <b-container>
    <div class="row">
      <div :class="colSize" v-for="(data, index) in projects" :key="data._id">
        <b-card :title="data.name" :sub-title="user.jobresponsibilities">
          <p class="card-text">
            data.description
          </p>
          <b-btn v-b-toggle="'collapse'+index" @click="showCollapse(data)">Toggle Collapse</b-btn>
          <b-collapse :id="'collapse'+index">
            <b-card>
              description
            </b-card>
          </b-collapse>
        </b-card>
      </div>

    </div>
  </b-container>
</div>
</template>

<script>
import Header from '@/components/Header'
export default 
  name: 'dashboard',
  components: 
    Header
  ,
  mounted() ,
  methods: 
    showCollapse(data) 
      this.colSize = 'col-8'
    
  ,
  data() 
    return 
      user: this.$store.getters.getUser,
      projects: this.$store.getters.getProject,
      colSize: 'col-4',
      show: false
    
  

</script>

<style lang="scss">
#projects 
    background-color: rgb(243, 243, 243);

</style>

Store.js：https://jsbin.com/kejinihoci/edit?js

我想要实现的是，当我点击切换按钮时，特定的列大小会发生变化（css 类），并且它只显示此项而不是其他项的可折叠。

我尝试向 v-model 添加一个 ID 以将其添加到我的方法中，但它不起作用。

【参考方案1】：

您应该做一些动态的事情，例如为每个 collapse 分配一个唯一的 id (id="'collapse'+index")，并在对应按钮 v-b-toggle="'collapse'+index" 内使用 v-b-toggle 指令：

   <b-btn v-b-toggle="'collapse'+index" class="m-1">Toggle Collapse</b-btn>
      <b-collapse id="'collapse'+index" >
        <b-card>
          description
        </b-card>
      </b-collapse>

要使类动态更改，您应该将一个名为 descShown 的属性添加到您的 projects 数组中。

在您的store 内的getProject 操作中

        let project = resp.data.project
        project=project.map((p)=>
               p.descShown=false;
               return p;
               )
        commit('getProject_success', 
          project
        )

模板内：

    <div :class="['col-8':data.descShown,'col-6':!data.descShown" v-for="(data, index) in projects" :key="data._id">

   ...
  <b-btn v-b-toggle="'collapse'+index" @click="showCollapse(index)">

你的方法应该是这样的：

   showCollapse(index) 
        this.$set(this.projects,index,true);
     

【讨论】：

感谢您的帮助！这听起来合理且有效。但是切换时如何更改 div 的 CSS 类？

你可以保留@click="showCollapse(data)"，这样会改变方法中的类名

我试过了，但showCollapse(data) this.colSize = 'col-8' 改变了每张卡片，而不仅仅是我切换的那张：>

你能显示商店代码吗，我会尝试找到一种基于项目数组使类动态化的方法

我添加了一些细节，希望对你有帮助

【参考方案2】：

这是一个很好的机会来利用 vue 的构建目标——组件！ 为您的<b-card> 创建一个新组件，将您需要的道具传递给它。这些组件中的每一个都有自己的一组数据和方法。

  <div :class="colSize" v-for="(data, index) in projects" :key="data._id">
    <b-card 
        :cardinfo="
           data.name,
           user.jobresponsibilities
        "
    ></b-card>
  </div>

Vue.component('b-card', 
  props: 
    cardinfo: 
        type: Object