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

Posted 2023-02-22

【中文标题】无法使用 VueJS 动态更改 div 颜色

【英文标题】：Unable to change the div color dynamically using VueJS

【发布时间】：2019-07-09 00:42:39

【问题描述】：

我正在使用 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 颜色。我在做什么错？有人可以帮帮我吗？

【问题讨论】：

不要在 mounted 钩子中放置 jQuery $(document).ready() 处理程序；它永远不会运行，因为文档在你的组件被挂载之前很久就准备好了

所以我应该只有 $("#div").on("click", ".folderRectangle", function () ) 吗？

您能解释一下我该怎么做吗？

您可以使用 VueJS.com 网站。 VueJS - Class and Style bindings

【参考方案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>

【讨论】：

这如何与 OP 的 <stats-card> 组件一起使用？

【参考方案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>