CODEWITHSUNDEEP
vuejs2vue-componentvuexvuetify.js
Stephane Paquet
Stephane Paquet

Reputation: 2344

How to trigger a method at component opening in vuejs?

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

Upvotes: 1

Views: 3832

Answers (3)

skribe
skribe

Reputation: 3615

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.

Upvotes: 2

Viral Patel
Viral Patel

Reputation: 485

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

Upvotes: 0

Stephane Paquet
Stephane Paquet

Reputation: 2344

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

Upvotes: 0

Related Questions