nmtechnology
1 month ago
165
1
Vue

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

Posted 1 month ago by nmtechnology

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--> 
                        
                        

Please sign in or create an account to participate in this conversation.