How to trigger a method at component opening in vuejs?

Question

I have a main component that is used to display items using a loop:

<v-list-tile v-for="(item, index) in items" :key="item.title">
  ...
  <report type="item.type"> </report>
</v-list>

The report component is used to report abuse on the system, and report type may vary depending on the item from the parent loop.

As users are very unlikely to use report on a regular basis I would like to only load v-select elements when the Dialog (modal) is opened.

Using created or mounted triggers the loading method everytime the report component is generated and not when the report component is opened.

Is there a smart way to prevent this and only have the loading method within report being triggered only when the component is opened.

=== Report.vue file ===
=== This file is loaded in the parent component

<template lang="html">
      <v-dialog v-model="dialog" persistent max-width="800px" lazy>
        <v-btn icon slot="activator">
          <v-icon>error_outline</v-icon>
        </v-btn>
        <v-card>
          <v-card-title>
            <div class="headline"><v-icon large>error_outline</v-icon> Reporting</div>
          </v-card-title>
          <v-card-text>You are about to report the following {{ reportType }}: "<i>{{ reportContent.title }}</i>"
            <v-container v-if="this.$store.getters['report/getLoadedState']" grid-list-md >
            <v-layout wrap>
              <v-flex xs12 sm12>
                <v-select
                  label="Select a reason"
                  required
                  cache-items
                  :items="items"
                  item-text="title"
                  item-value="id"
                ></v-select>
              </v-flex>
              <v-flex xs12 sm12>
                <v-text-field
                  label="Please provide additional information here"
                  multi-line></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
          <v-container v-else grid-list-md>
            <v-layout>
              <v-flex xs12 sm12>
                Loading
              </v-flex>
            </v-layout>
          </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" flat="flat" @click.native="cancel">Cancel</v-btn>
            <v-btn color="green darken-1" flat="flat" @click.native="report">Report</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
</template>

<script>
  export default {
    name: 'report',
    data () {
      return {
        dialog: false,
        items: this.$store.getters['report/getItems']
      }
    },
    props: ['reportType', 'reportContent'],
    methods: {
      cancel () {
        this.dialog = false
      },

      report () {
        this.dialog = false
      },

      loadReasons (type) {
        if (!this.$store.getters['report/getLoadedState']) {
          this.$store.dispatch('report/setItems', type)
        }
      }
    }
  }
</script>

<style lang="css" scoped>
</style>

PS 1: I'm not using JQuery and do not intend to use it
PS 2: Calling the method outside of the report component is not an option as I want to maximize reusability of this compenent and only pass arguments to it using props

@thanksd done. Adding that the project was generated using vue-cli and that vuetify was added to it. — Stephane Paquet, Oct 10 '17 at 20:15

score 2 · Answer 1 · edited Jul 15 '22 at 23:10

How I have done this in the past is to use a "dynamic component." Vue uses a special syntax for dynamic components <component v-bind:is="currentView"></component> see: Vue dynamic components

You can set the "currentView" property to null and then on a button click another event set the currentView to report. Doing it this way will allow you to use the mounted method as the component is not rendered or created until it is dynamically called.

<component :is="myComponent"></component>
<v-btn @click="loadComponent">Show Report</v-btn>

then...

data:{
      myComponent: null;
},
methods: {
      loadComponent: function(){
            this.myComponent = 'report';
      }
}

P.S. You can of course use this method to render any other components in the same place. i.e. you can set the 'currentView' to the name of any available component and it will be instantly rendered in its place.

That can work, but required methods to be called outside of the component, what is not my plan. I want to keep the component "autonomous" — Stephane Paquet, Oct 11 '17 at 17:23

score 0 · Answer 2 · answered Oct 10 '17 at 23:33

0

I ended up using a watch on the boolean managing the dialog...

answered Oct 10 '17 at 23:33

Stephane Paquet

2,315
27
31

score 0 · Answer 3 · answered Oct 11 '17 at 05:59

0

Make a function which loads the v-select. Don't initialize it just create it. Now whenever user clicks the report model you can initialize multiple functions using v-on:click or @click.

For example :

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>

This solution can also be found on : Stackoverflow Link

answered Oct 11 '17 at 05:59

Viral Patel

485
1
5
11

I like your answer, but not a solution to my problem. – Stephane Paquet Oct 11 '17 at 17:22

How to trigger a method at component opening in vuejs?

3 Answers3