Issue
I am developing an application using Bootstrap and VueJS.
I am developing a Google drive like folder structure, wherein I want to highlight a div in blue when it is selected.
Here is the code:
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"></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"></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>
When I try clicking on the div, I am unable to change the css color of the div using onClick. What wrong am I doing? Can someone please help me out?
Solution
In this example i provide you a basic example using Class bindinng
and when you select an elements will be highlighted in blue :
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"></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>
Answered By - Boussadjra Brahim
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.