代码之家 › 专栏 › 技术社区 › mrks

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

collapse toggle vue.js javascript

mrks · 技术社区 · 6 年前

我有以下代码:

<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以将其添加到我的方法中,但没有成功。

2 回复 | 直到 6 年前

ryeMoss 6 年前

这是一个很好的机会来利用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
    }
  }
}

Boussadjra Brahim 6 年前

你应该做一些动态的事情,比如分配一个唯一的id( id="'collapse'+index" )每人 collapse 和使用 v-b-toggle 相应按钮内的指令 v-b-toggle="'collapse'+index" :

   <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

在里面 getProject store

        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);
     }