如何在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的组件打开时触发一个方法？

回答

相关问题