2

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
Improve this question

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

cold you please advice more detailed ? I don't have a problem to change this prop with some method, but this would affect all the others ements in the grid. The thing I would like to achieve is to change this specific property on specific hovered element without using methods or variables
I've edited my answer. I don't think it's possible without methods or variables since it is a prop's value you are trying to modify.
Sorry , but as I've told before , it affected all the elements instead of one
-1

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.

Improve this answer

3 Comments

Yeah , it could be , but what if have more of those components. For example I would bind :zDepth to some variable in Data and then change it on:mouseover. But it would affect all the other elements binded to that variable. So how could I achieve changing the value only for one specific element which is hovered ? I've edited the post with full code of that component , so you could see the structure
Honestly I've simply achieved it from the css by adding a class and transition . But I'm, still interested if that is possible some how to bind custom properties to events like hover for specific elements
That link just 404s

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.