CODEWITHSUNDEEP
htmlcssvue.js
Donnie Berry
Donnie Berry

Reputation: 65

v-bind condition on true or false not working

Basically, I have a menu button. by default, it is false. When I click it, it gets set to true.

I want to apply a style of marginLeft:250px to it if it is true, and back to marginLeft:0 if it is false but I can't seem to get my code to work at all.

The v-bind tag should check if isOpen is true, and if it is, apply "open"

   <span class="open-slide" @click="openSlide()" v-bind:style="{'open': isOpen}">

const app = new Vue({
    el: '#test',
    data: {
        isOpen: false,
        moreinfo: false,
        open: {
          marginLeft:"250px"  
        },
        locations: [
            {
                name: "Europe",
                desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
                img: "img/europe.jpg",

                moreinfo: [
                    {
                        desc: "Euro desc",
                    header: "Welcome to Europe"
                    }
                ]
            },
            {
                name: "America",
                desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut",
                img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
               moreinfo: [
                    {desc: "America desc",
                    header: "Welcome to America"}
                ]
            },
            {
                name: "Scotland",
                desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
                img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
                moreinfo: [
                    {desc: "Scotland desc",
                    header: "Welcome to Scotland"}
                ]
            },

        ],
        selected: location[1],
    },
        created: function(){
    this.selected = this.locations[0]
  },
    methods:{ 
        moreinfo2(location) {
        this.selected = location;
        },
        openSlide: function() {
            this.isOpen = !this.isOpen;
            if(this.isOpen){
                console.log("True")
            } else {
                console.log("False")
            }
        }
    }
})

Upvotes: 1

Views: 837

Answers (1)

Derek Pollard
Derek Pollard

Reputation: 7165

The problem is that you're using Vue's nifty object-syntax to bind to the elements style attribute with a CSS style that isn't recognized:

<span class="open-slide" @click="openSlide()" v-bind:style="{'open': isOpen}">

open is not recognized as a valid CSS rule, so what I'm assuming you wanted to do was bind to the class instead:

<span @click="openSlide()" v-bind:class="{open: isOpen, openSlide: isOpen}">

And finally, don't forget to define the CSS selector (with all your rules) in either a CSS file or inline style tag:

<style>
   .open {
      /* css styling goes here */
   }
</style>

I hope this helps!

Upvotes: 5

Related Questions