Vue attributes not working, like v-if and so on..

I am trying to simply make a button that triggers a modal open when you click the button element and then closes when you click the exit button in the modal.

When I apply v-bind or v-if or v-show and pass my data property of showModal: false to cancel out the is-active class by default, the modal is hidden and will not trigger the modal open but when I click the button I get an error message in vue dev tools saying "property or method is not defined on the instance but referenced during render".

When I take the v-if attribute off of my component element in the index.blade, the modal is shown without having to click the button like a default. I can see my component listed in the tree under root with all my other working components using the Vue dev tools window in Chrome.

My observation is that if I can see my component listed in the tree using Vue dev tools extension the attributes applied should also be working? Do I have my component setup correctly? I was also wondering if I need to only use the #app Vue instance in my app.js file or can I keep my #form instance for my modal? I am just starting to learn how to make Vue components.

Any help would be greatly appreciated!

App.js file

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('order-progress', require('./components/OrderProgress.vue').default);
Vue.component('order-alert', require('./components/OrderAlert.vue').default);
Vue.component('order-notifications', require('./components/OrderNotifications.vue').default);

Vue.component('order-create-modal', require('./components/OrderCreateModal.vue').default);





const app = new Vue({
    el: '#app',
    mounted() {
      Echo.channel('pizza-tracker')
      .listen('OrderStatusChanged', (e) => {
        console.log('realtime for pizza tracker channel is working!')
      },
      );
    }
});

//Here is the instance below this comment I am using for the modal component and I am not sure if I need this instance to make another new vue component or can I keep using the original #app instance above this comment and just keep adding my new components to the #app instance?//

const form = new Vue({
    el: '#form',
  
    components: { 
      ordercreatemodal,
    },
   
    data, {
      showModal: false
     },
  
});

OrderCreateModal.vue file

   <modal class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Create New Order Step 1</p>
      <button class="modal-close is-large" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      
      <form>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:first-child">
            <select>

                <option value="1">True Private</option>
                <option value="2">Group Cremation</option>
                <option value="3">Partition Cremation</option>
            </select>
            <button class="uk-button uk-button-default" type="button" tabindex="-1">
                <span></span>
                <span uk-icon="icon: chevron-down"></span>
            </button>
        </div>
    </div>

</form>

    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Next</button>
      <button class="button is-warning">Cancel</button>
    </footer>
  </div>
</modal>
    
    
</template>

<style scoped>
    
</style>

<script>
props: ['showModal']
 method: {
      showModal: false
     }  


</script>

index.blade.php


                        <!-- Modal Component starts--> 
                        <div id="form">
                            <button @click="showModal = true" class="button is-normal is-success uk-margin-remove-adjacent">Add Order</button>
                            
                            <order-create-modal v-bind="showModal"></order-create-modal>
                        </div>
                        <!-- Modal Component ends-->

piljac1

5 years ago

Best Answer

Level 28

Your issue is due to multiple things :

In your Vue instantiation, you have a typo

const form = new Vue({
    el: '#form',
  
    components: { 
      ordercreatemodal,
    },
   
    data: { // Here you placed a comma instead of a colon
      showModal: false
    },
});

In your component, you have a defined method key with an object containing a showModal key. This is not causing any issue in your case because it is unused, but it is wrong for these reasons :
1. It is completely useless for your use case
2. The correct naming is methods and not method
3. The methods object should only contain functions
4. A function cannot have the same name as a prop or a data attribute
You're not using your showModal prop anywhere in your component. If you want to toggle the is-active on and off depending on your showModal prop, you can do the following :

<modal
  :class="{ 'is-active': showModal }"
  class="modal"
>

Your v-bind directive is not used correctly. You need to specify the prop's name.

<!-- Only using ":" is a shorthand for "v-bind:". Both are valid. -->
<order-create-modal :show-modal="showModal"></order-create-modal>

Your close and cancel buttons don't do anything. You cannot mutate a prop directly, so what you can do is emitting an event that can be caught and handled in the parent context :

Your component

<!-- Implement the same thing for the cancel button -->
<button
  class="modal-close is-large"
  aria-label="close"
  @click="$emit('close')"
></button>

Your view

<!-- Here you can capture the emitted "close" event to set the "showModal" attribute to false -->
<order-create-modal
  :show-modal="showModal"
  @close="showModal = false"
></order-create-modal>

1 like

Please or to participate in this conversation.