Question

我有一个主要组件，用于使用循环显示项目：

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

report组件用于报告系统滥用情况，报告类型可能会有所不同，具体取决于父循环中的item。

由于用户不太可能定期使用report，因此我只想在打开Dialog（模态）时加载v-select元素。

每次生成created组件时，使用mounted或report都会触发加载方法，而不会在report组件打开时触发。

是否有一种智能方法可以防止这种情况，只有在打开组件时才会触发report内的加载方法。

=== Report.vue file ===
===此文件加载到父组件

中

<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组件之外的方法不是一种选择，因为我希望最大限度地提高此功能的可重用性，并仅使用props

将参数传递给它

Answer 1

过去我是如何使用“动态组件”的。 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';
      }
}

P.S。您当然可以使用此方法在同一位置渲染任何其他组件。即，您可以将'currentView'设置为任何可用组件的名称，它将立即呈现在其位置。

Answer 2

我最终在管理对话框的布尔值上使用了一个手表...

Answer 3

创建一个加载v-select的函数。不要初始化它只是创建它。现在，只要用户单击报表模型，您就可以使用v-on初始化多个函数：单击或@click。

例如：

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

此解决方案也可以在以下位置找到： Stackoverflow Link

如何在vuejs中打开组件时触发方法？

3 个答案: