无法使用 VueJS 动态更改 div 颜色

Question

我正在使用 Bootstrap 和 VueJS 开发一个应用程序。

我正在开发一个类似于 Google 驱动器的文件夹结构，其中我想在选中一个 div 时以蓝色突出显示它。

代码如下：

export default{
  mounted(){  
    $(document).ready(function () {

      let that = this;
      $("#div").on("click", ".folderRectangle", function () {
          $(that).css("background-color", "blue");
          $(".folderRectangle").not(that).css("background-color", "white");
      }); 
    });
  }
}

.folderRectangle { 
  x: 220px; 
  y: 473px; 
  width: 299px; 
  height: 62px; 
  background-color: #FFFFFF; 
  border: 1px solid #BDBDBD; 
  border-radius: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row">

  <div class="col-xl-3 col-md-6">
    <stats-card>
      <div slot="header" class="folderRectangle" id="div">
        <div class="row">
          <div class="col-3">
            <div class="clearfix">

              <i class="material-icons" id="folder-image">&#xe2c9;</i>

            </div>
          </div>
          <div class="col-9">
            <div class="clearfix" style="position: relative">
              <div>
                <p style="text-align: left">Folder Name</p>
              </div>
              <div>
                <p style="text-align:left">20 files</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </stats-card>
  </div>
  
  <div class="col-xl-3 col-md-6">
    <stats-card>
      <div slot="header" class="folderRectangle" id="div">
        <div class="row">
          <div class="col-3">
            <div class="clearfix">
              <i class="material-icons" id="folder-image">&#xe2c9;</i>
            </div>
          </div>
          <div class="col-9">
            <div class="clearfix" style="position: relative">
              <div>
                <p style="text-align: left">Folder Name</p>
              </div>
              <div>
                <p style="text-align:left">20 files</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </stats-card>
  </div>
  
 </div>

当我尝试单击 div 时，我无法使用 onClick 更改 div 的 css 颜色。我在做什么错？有人可以帮帮我吗？

Answer 1

在此示例中，我为您提供了一个使用 Class bindinng 的基本示例，当您选择一个元素时，将以蓝色突出显示：

new Vue({
  el: "#app",

  data() {
    return {
      selected: -1,


      folders: [{
          name: "Folder 1",
          numFiles: 25
        },
        {
          name: "Folder 2",
          numFiles: 20
        },
        {
          name: "Folder 3",
          numFiles: 21
        }, {
          name: "Folder 4",
          numFiles: 20
        }


      ]


    }
  },
  methods: {



  }

})

.folderRectangle {
  width: 299px;
  height: 62px;
  background-color: #FFFFFF;
  border: 1px solid #BDBDBD;
  border-radius: 0px;
}

.folder-selected {
  background: #4545ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<div id="app" class="row">



  <div slot="header" class="folderRectangle" v-for="(folder,index) in folders" @click="selected=index" :class="{'folder-selected':selected==index}">
    <div class="row">
      <div class="col-3">
        <div class="clearfix">

          <i class="material-icons" id="folder-image">&#xe2c9;</i>

        </div>
      </div>
      <div class="col-9">
        <div class="clearfix" style="position: relative">
          <div>
            <p style="text-align: left">{{folder.name}}</p>
          </div>
          <div>
            <p style="text-align:left">{{folder.numFiles}} files</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Answer 2

你处理这个问题的方式不是很 像 Vue。我也不建议混合使用 jQuery 和 Vue，但这更多是个人选择。

使用 Vue 执行此操作的方法是让您的组件在单击时发出一个事件，父级可以使用该事件与其他应该更改颜色的 stats-card 组件进行通信。

您可以使用refs跟踪每张卡片

例如...

Vue.component('StatsCard', {
  props: { isActive: Boolean },
  template: `<div :class="{active: isActive}" @click="handleClick">
  <slot></slot>
  </div>`,
  methods: {
    handleClick () {
      this.$emit('click', this)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    activeCard: null
  },
  methods: {
    setActiveCard(card) {
      this.activeCard = card
    }
  }
})

.folderRectangle { 
  width: 299px; 
  height: 62px; 
  background-color: #FFFFFF; 
  border: 1px solid #BDBDBD; 
  background-color: white;
}

.active .folderRectangle {
  background-color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <stats-card @click="setActiveCard" ref="card1"
              :is-active="activeCard === $refs.card1">
    <div class="folderRectangle">Content #1</div>
  </stats-card>
  <stats-card @click="setActiveCard" ref="card2"
              :is-active="activeCard === $refs.card2">
    <div class="folderRectangle">Content #2</div>
  </stats-card>
</div>