CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Ali Haider
Ali Haider

Reputation: 41

v-show not working with props

I am trying to hide or show button using props.

Here is the code

View (Blade)

<product-form-component savebutton="false" updatebutton="false"></product-form-component>

Component template

<template>
    <div class="form-actions text-right col-md-12">
                <button v-show="showsavebutton" class="btn btn-primary">Save</button>
                <button v-show="updatemode && showupdatebutton" class="btn btn- primary">Update</button>
    </div>
</template>

Javascript

export default {
        props: ['showupdatebutton', 'showsavebutton', 'modalid']
}

Upvotes: 3

Views: 6405

Answers (2)

acdcjunior
acdcjunior

Reputation: 135792

Two points:

  • The props you are passing don't work the way you think they do; and
  • You have to create data variables (or props) in the component with the names you are using in the v-show.

Passing props

When you pass like:

<product-form-component savebutton="false" updatebutton="false"></product-form-component>

inside the component, the savebutton and updatebutton properties will be strings. In the example above, they won't be the boolean false, they will be the string "false".

To bind them to different values, use v-bind:propname or its shorthand :propname:

<product-form-component :savebutton="false" :updatebutton="false"></product-form-component>

That way, inside the component, those properties will really have the value false.

Variables inside component and v-show

The variables you use in the v-shows:

<button v-show="showsavebutton" ...
<button v-show="updatemode && showupdatebutton" ...

Don't exist in your component. You have to create data variables (or props) in the component with the names you are using in the v-show.

Considering you already have some props declared, here's an example of declaring those v-show variables in the data() using the props as initial value:

Vue.component('product-form-component', {
  template: "#pfc",
  props: ['updatebutton', 'savebutton', 'modalid'],
  data() {
    return {
      updatemode: this.updatebutton,         // initialized using props
      showupdatebutton: this.updatebutton,
      showsavebutton: this.savebutton
    }
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
<script src="https://unpkg.com/vue"></script>

<template id="pfc">
  <div class="form-actions text-right col-md-12">
    <button v-show="showsavebutton" class="btn btn-primary">Save</button>
    <button v-show="updatemode && showupdatebutton" class="btn btn- primary">Update</button>
  </div>
</template>

<div id="app">
  <p>{{ message }}</p>
  <product-form-component :savebutton="true" :updatebutton="true"></product-form-component>
</div>

Upvotes: 6

samayo
samayo

Reputation: 16495

Props as passed down to child with the bind syntax :, so in your case you forgot to add it:

try: 

<product-form-component :savebutton="false" :updatebutton="false"></product-form-component>

Upvotes: 0

Related Questions