如何在vuejs的組件打開時觸發一個方法？

我有用於顯示使用循環項的主要成分：如何在vuejs的組件打開時觸發一個方法？

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

的report部件是用來報告在系統上濫用，並報告類型可取決於item從父環而變化。

由於用戶不太可能定期使用report，所以我只想在打開對話框（模式）時加載v-select元素。

使用created或mounted觸發每次的report分量被生成並且不是當report部件被打開裝載方法。

是否有一種智能的方法來防止這種情況發生，只有在打開組件時纔會觸發report中的加載方法。

=== Report.vue文件===
===此文件被加載在父組件

<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：我不使用jQuery和不打算使用它
PS 2：調用report成分以外的方法是不是一種選擇，因爲我想最大限度地利用這一compenent的可重用性和唯一使用props

來源

2017-10-10 Stephane Paquet

你可以分享你'report'組件定義：

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

該解決方案也可以在找到？ – thanksd

@thanksd完成。添加該項目是使用vue-cli生成的，並且添加了vuetify。 –

如何我在過去所做的那樣，這是使用一個參數傳遞給它「動態組件」。 Vue公司使用動態組件<component v-bind:is="currentView"></component>一種特殊的語法see: Vue dynamic components

您可以在「currentView」屬性設置爲null，然後點擊一個按鈕的另一事件設置currentView到report.這樣做，這樣可以讓你使用的安裝方法在動態調用組件之前，組件不會呈現或創建。

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

然後...

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

附：您當然可以使用此方法在同一位置渲染任何其他組件。即您可以將'currentView'設置爲任何可用組件的名稱，並且將立即在其位置呈現。

來源

2017-10-10 20:44:52 skribe

這可以工作，但需要在組件外部調用的方法，那我的計劃不是什麼。我想保留組件「自主」 –

我結束了使用上的布爾手錶管理對話框......

來源

2017-10-10 23:33:37

讓它加載的v選擇功能。不要初始化它只是創建它。現在無論何時用戶點擊報告模型，您都可以使用v-on初始化多個功能：點擊或@click。

例如： Stackoverflow Link

來源

2017-10-11 05:59:34

我喜歡你的答案，但不是解決我的問題。 –

如何在vuejs的組件打開時觸發一個方法？

回答

相關問題