Changing Custom Property on hover || VUEJS - vue.js

Question

Trying to become friends with VUEJS. Got stuck on some simple stuff, couldn't google it. So I'm using MuseUi framework in my App. Well I want to do a simple thing, change the value of the property for each specific element on hover
<mu-paper :zDepth="1" v-on:mouseover=" ???? " class="searchBox">
I need to change:zDepth to 3 for example, on hover of the element. How could I achieve that?
full code snippet
<template>
<div>
<div class="column is-one-quarter">
<mu-paper :zDepth="paperHover" v-on:mouseover="changePaper" class="searchBox">
<mu-text-field fullWidth="true" :hintText="searchHint" v-model="query" class="demo-radio"/><br/>
<mu-radio label="Name" name="group" nativeValue="1" v-model="selected" class="demo-radio"/>
<mu-radio label="Manager" name="group" nativeValue="2" v-model="selected" class="demo-radio"/>
<mu-radio label="Department" name="group" nativeValue="3" v-model="selected" class="demo-radio"/>
<mu-radio label="Stage" name="group" nativeValue="4" v-model="selected" class="demo-radio"/>
<mu-radio label="Deadline" name="group" nativeValue="5" v-model="selected" class="demo-radio"/>
<mu-radio label="Start Date" name="group" nativeValue="6" v-model="selected" class="demo-radio"/>
</mu-paper>
</div>
<div class="column is-one-column">
<mu-float-button icon="add" v-on:click="openModal"/>
</div>
<div class="column">
<draggable v-model="projects" #start="drag=true" #end="drag=false">
<transition-group name="list-complete staggered-fade" tad="ul" :css="false" :before-enter="beforeEnter" :enter="enter" :leave="leave">
<li v-for="(project, index) in projectsComputed" :key="project.name" :data-index="index" class="column is-one-third list-complete-item">
<mu-paper :zDepth="3">
<mu-icon-button icon="delete" class="delete-button"></mu-icon-button>
<article class="media">
<div class="media-content">
<div class="content">
<div class="project-name has-text-centered">
<span>{{project.name}}</span>
</div>
<mu-badge :content="project.stage.name" primary slot="right"/>
<!--<div class="project-status has-text-centered">-->
<!--<span>{{project.stage.name}}</span>-->
<!--</div>-->
<div class="project-desc-list has-text left">
<span>Manager: </span> <span>{{project.manager.name}}</span>
</div>
<div class="project-desc-list has-text left">
<span>Department: </span> <span>{{project.department.name}}</span>
</div>
<div class="project-desc-list has-text left">
<span>Start Date: </span> <span>{{project.started_from}}</span>
</div>
<div class="project-desc-list has-text left">
<span>Dealine: </span> <span>{{project.deadline}}</span>
</div>
<p class="project-description">
{{project.description}}
</p>
</div>
</div>
</article>
</mu-paper>
</li>
</transition-group>
</draggable>
</div>
<div id="modal-ter" :class="[isActive ? activeClass : '', modal]">
<div class="modal-background" v-on:click="openModal"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Add New Project</p>
<button v-on:click="openModal" class="delete"></button>
</header>
<section class="modal-card-body">
<div class="column is-one-third">
<div class="field">
<label class="label">Project Name</label>
<p class="control">
<input class="input" v-model="newProject.name" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label">Project Description</label>
<p class="control">
<input class="input" v-model="newProject.description" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label">Start Date</label>
<p class="control">
<input class="input" v-model="newProject.started_from" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label">Deadline</label>
<p class="control">
<input class="input" v-model="newProject.deadline" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label">Manager</label>
<p class="control">
<input class="input" v-model="newProject.manager.name" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label">Department</label>
<p class="control">
<input class="input" v-model="newProject.department.name" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="column is-one-third">
<div class="field">
<label class="label">Stage</label>
<p class="control">
<input class="input" type="text" v-model="newProject.stage.name" placeholder="Text input">
</p>
</div>
</div>
</section>
<footer class="modal-card-foot">
<a v-on:click="createProject" class="button is-success">Save changes</a>
<a class="button">Cancel</a>
</footer>
</div>
</div>
</div>
</template>
<style scoped>
.demo-radio {
min-width: 8em;
}
.searchBox {
padding: 2em;
}
.project-status {
position: absolute;
top: 0.3em;
left: 0.3em;
background-color: #ffdb57;
padding: 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
border-radius: 0.3em;
}
.project-name {
font-weight: 900;
}
.project-description {
margin-top: 0.5em;
padding-top: 1em;
border-top: 1px solid lightgrey;
}
.project-desc-list span:first-of-type{
font-weight: 900;
}
.box {
position: relative;
}
.project-name {
text-align: center;
}
.delete-button {
background-color: rgba(255, 8, 8, 0.4);
transition: all .25s ease-in;
float: right;
position: absolute;
right: 0.3em;
top: 0.3em;
}
.delete-button:hover, .delete-button:focus{
background-color: rgba(255, 0, 0, 0.68);
}
.column{
display: inline-block;
padding: 1em;
}
.list-complete-item {
transition: all 1s;
}
.list-complete-enter, .list-complete-leave-active {
opacity: 0;
}
</style>
<script >
export default {
data(){
return {
loading: false,
isActive: false,
paperHover: 3,
modal: 'modal',
searchHint: 'Search by ...',
activeClass: 'is-active',
query: "",
selected: "",
projects: [],
newProject: {
name: '',
description: '',
started_from: '',
deadline: '',
manager: {
name: ''
},
department: {
name: ''
},
stage: {
name: ''
}
},
}
},
options: {
segmentShowStroke: false
},
mounted() {
this.getData();
},
computed: {
projectsComputed: function () {
var vm = this;
if(this.selected == '1' || this.selected == ""){
this.searchHint = "Search by Name";
return this.projects.filter(function (project) {
return project.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}else if(this.selected == '2'){
this.searchHint = "Search by Manager";
return this.projects.filter(function (project) {
return project.manager.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}else if(this.selected == '3'){
this.searchHint = "Search by Department";
return this.projects.filter(function (project) {
return project.department.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}else if(this.selected == '4'){
this.searchHint = "Search by Stage";
return this.projects.filter(function (project) {
return project.stage.name.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}else if(this.selected == '5'){
this.searchHint = "Search by Deadline";
return this.projects.filter(function (project) {
return project.deadline.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}else if(this.selected == '6'){
this.searchHint = "Search by Start Date";
return this.projects.filter(function (project) {
return project.started_from.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
})
}
}
},
methods: {
changePaper: function () {
this.paperHover = 6 ;
},
beforeEnter: function (el) {
el.style.opacity = 0
el.style.height = 0
},
enter: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
},
getData() {
this.loading = true;
axios.get('/project/').then(({data}) => this.projects = data).then(() => this.loading = false)
},
openModal: function(){
if(this.isActive){
this.isActive = false;
}else {
this.isActive = true;
}
},
createProject() {
axios.post('project/store', this.newProject)
}
}
}
</script>
enter code here

Answer 1

The easiest way is probably to wrap the mu-paper component in another component where you can encapsulate the hover behavior.
// MuPaperHover.vue
<template>
<mu-paper :z-depth="zDepth" #mouseenter.native="zDepth = 3" #mouseleave.native="zDepth = 1">
<slot/>
</mu-paper>
</template>
<script>
export default {
data() {
return {
zDepth: 1,
};
},
};
</script>
You can then use mu-paper-hover in place of mu-paper.

Answer 2

I'm not familiar with MuseUI. However, I've written a Vue.js training course. In Vue, the area where your "????" are, should be a JavaScript expression. A typical practice is to call a method on your Vue instance that would then update the value of the property for the specific element. Without more details, it's hard to provide specifics.
The bottom line is, the "????" can be a JavaScript expression.