[Vuejs]-Vue boolean property not working

by

2👍

✅

Not sure what you want to achieve with this.
But I think that you should put maximize in data.

<div id="one-example" >  
  <p v-if="maximize">Hello vue!</p>
  {{maximize}}
</div>


var vm = new Vue({
  el: '#one-example',
  data: function(){
   return{
    maximize:true
   }
  }
});

Otherwise via component & props:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
      <one-example :maximize="false"></one-example>
    </div>

    <script>
        Vue.component('one-example', {
         props: ['maximize'],
         template: '<div  >  <p v-if="maximize">Hello vue!</p>  {{maximize}} </div>'
       });

       var vm = new Vue({
        el: '#app'
       });

    </script>
    </body>
</html>

In case you don’t need a true/false state for maximize but a set-to-something/unset ……
(As stated in the comments below) maximize can be set also like:

   <one-example maximize="anything"></one-example>

or not set or void

   <one-example ></one-example>
   <one-example maximize=""></one-example>
👤koalaok

Leave a comment