Calling a method in a modal initially hidden (transition)

Question

I have a simple method "updateTotal" initialized in my app / vue :

// start app
new Vue({
el: '#app2',
data: {
    showModal1: false,
    showModal2: false,
    total : 0
},
methods: {
    updateTotal: function (num) {
      this.total = this.total + num
    }
}
})

When I call this method from by example a button in the HTML code in the app2 section, it's OK (text "total" updated).

When I call this method from a div section hidden at the loading of the page (it's a modal, with vue.js "transition" system), I have this error : Property or method "updateTotal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

The code of this modal / transition (it's IN the app2 div) is :

<!-- template for the modal component SERVICES-->
                <script type="text/x-template" id="modal2-template">
                <transition name="modal2">
                    <div class="modal-mask">
                    <div class="modal-wrapper">
                        <div class="modal-container">

                        <div class="modal-header">
                            <slot name="header">
                            Header
                            </slot>
                        </div>

                        <div class="modal-body">

                                <!-- LISTE SERVICES -->
                                <div>
                                    <div>

                                        <div class="control">
                                        <label class="radio">
                                            <input type="radio" name="service1" v-on:click="updateTotal(10)">
                                            Oui
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="service1" checked v-on:click="updateTotal(-10)">
                                            Non
                                        </label>
                                        </div>
                                    </div>
                                    <div>


                                        <div class="control">
                                        <label class="radio">
                                            <input type="radio" name="service2" v-on:click="updateTotal(20)">
                                            Oui
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="service2" checked v-on:click="updateTotal(-20)">
                                            Non
                                        </label>
                                        </div>
                                    </div>
                                </div>
                                <!-- LISTE SERVICES -->

                        </div>

                        <div class="modal-footer">
                            <slot name="footer">
                            default footer
                            <button class="modal-default-button" @click="$emit('close')">
                                OK
                            </button>
                            </slot>
                        </div>
                        </div>
                    </div>
                    </div>
                </transition>
                </script>

What can I do to be able to call this method from this modal / transition div ?

Thanks !

MAMP MySQL PHP5

MarcRo MarcRo · Accepted Answer · 2019-09-06T15:30:23

The issue occurs since you try to call updateTotal() from within the template of a different component.

The context within the template is always the component itself (this). Since the method updateTotal() is not defined in this component, you cannot call it.

There are several workarounds, but I consider two the cleanest:

For simple projects/apps: emit an event that triggers the method in the parent (like your close event)
For more complex apps: Use shared state with Vuex and make your method an action

Calling a method in a modal initially hidden (transition)

1 Answers