title: Bus emits event too many times [Updated desc.]
body: <p>Ive got the following problem:</p>
  
  <p>I got 2 components which are passing data to each other via the bus.
  In my case I'm looking for the portfolio_id in the ViewCustomer Component and send it to the AddPortfolioFund Component. In addition to the ID im passing a variable that sets the dialog in the AddPortfolioFund to true.</p>
  
  <p>I get the right ID and emit it here together with the variable to show the dialog</p>
  
  <pre><code>createPortfolioFund({ portfolio_id }) {
    this.selectedPortfolio = portfolio_id
    bus.$emit("ViewAddPortfolioFund", (this.addPortfolioFund = true)); //Variable to show the Dialog
    bus.$emit("getSelectedPortfolio", this.selectedPortfolio); //Here im sending it
    bus.$emit("buyFundForCustomer", this.editedItem.customer_id);
  },
  </code></pre>
  
  <p>In the AddPortfolioFund component I show the dialog by getting the emited variable and access the ID for working with it.</p>
  
  <p>And at this point i'm having trouble, cause the AddPortfolioFund component get's opend as often es ID's exist in the array from portfolios</p>
  
  <p>When I click the button in ViewCustomer.vue with createPortfolioFund() function, it gets the ID from the clicked Object and after that I want to pass that ID and a variable via bus to show the dialog.
  In the AddPortfolioFund Component I firstly want to display the dialog and after that work with the passed ID</p>
  
  <p>ViewCustomer.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { bus } from "../../main";
  import axios from "axios";
  import AddPortfolioFundComponent from "./AddPortfolioFund.vue";
  import SellPortfolioFundComponent from "./SellPortfolioFund.vue";
  
  
  export default {
    components: {
      AddPortfolioFundComponent,
      SellPortfolioFundComponent
    },
    data() {
      return {
        viewCustomer: false,
        editedItem: {},
        portfolios: [],
        userdata: {},
        ConfirmAddPortfolio: false,
        selectedPortfolio: {},
        dialogNote: {},
        selectedPortfolio2: {}
      };
    },
  
    methods: {
      
      createPortfolioFund({ portfolio_id }) {
        this.selectedPortfolio = portfolio_id
        bus.$emit("ViewAddPortfolioFund", (this.addPortfolioFund = true));
        bus.$emit("getSelectedPortfolio", this.selectedPortfolio);
        bus.$emit("buyFundForCustomer", this.editedItem.customer_id);
      },
  
    created() {
      bus.$on("viewCustomer", data =&gt; {
        this.viewCustomer = data;
      });
      bus.$on("EditData", editData =&gt; {
        this.editedItem = editData;
      });
      bus.$on("UserDataChannel", userData =&gt; {
        this.userdata = userData;
      });
    }
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                &lt;v-card-text v-for="(item, index) in portfolios" :key="index"&gt;
                    &lt;v-card
                      dark
                      color="gradient"
                      elevation="4"
                      class="pa-2 ml-auto mr-auto justify-center"
                      max-width="1000px"
                    &gt;
                      &lt;v-list-item three-line&gt;
                        &lt;v-list-item-content color="red"&gt;
                          &lt;div class="overline mb-2"&gt;
                            &lt;v-chip color="white" light x-small&gt;Depot-Nr: {{item.portfolio_id}}&lt;/v-chip&gt;
                          &lt;/div&gt;
                          &lt;v-list-item-title
                            class="display-1 mb-1"
                          &gt;{{formatPrice(item.portfolio_value)}}€&lt;/v-list-item-title&gt;
                          &lt;v-list-item-subtitle&gt;
                            Einstandwert: {{formatPrice(item.investment_capital)}}€
                            &lt;br /&gt;
                          &lt;/v-list-item-subtitle&gt;
                        &lt;/v-list-item-content&gt;
                        &lt;v-list-item-avatar size="80" color="#fff"&gt;
                          &lt;v-icon color="#243B55" large&gt;mdi-bank&lt;/v-icon&gt;
                        &lt;/v-list-item-avatar&gt;
                      &lt;/v-list-item&gt;
                      &lt;template v-if="!item.funds.length"&gt;&lt;/template&gt;
                      &lt;template v-else&gt;
                        &lt;v-simple-table class="ml-4 mr-4" light&gt;
                          &lt;template v-slot:default&gt;
                            &lt;thead&gt;
                              &lt;tr&gt;
                                &lt;th class="text-left"&gt;ISIN&lt;/th&gt;
                                &lt;th class="text-left"&gt;Name&lt;/th&gt;
                                &lt;th class="text-left"&gt;Stückzahl&lt;/th&gt;
                                &lt;th class="text-left"&gt;Marktpreis&lt;/th&gt;
                                &lt;th class="text-left"&gt;Positionswert&lt;/th&gt;
                                &lt;th class="text-left mr-2"&gt;Kaufpreis&lt;/th&gt;
                                &lt;th class="text-left"&gt;Performance&lt;/th&gt;
                              &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                              &lt;tr v-for="(items,index) in item.funds" :key="index"&gt;
                                &lt;td&gt;{{items.isin}}&lt;/td&gt;
                                &lt;td class="font-weight-bold"&gt;{{items.fund_name}}&lt;/td&gt;
                                &lt;td&gt;{{items.quantity}}&lt;/td&gt;
                                &lt;td&gt;{{items.marketprice}} €&lt;/td&gt;
                                &lt;td&gt;{{items.positionswert}} €&lt;/td&gt;
                                &lt;td&gt;{{items.buying_price}} €&lt;/td&gt;
                                &lt;td&gt;{{items.performance}} %&lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/tbody&gt;
                          &lt;/template&gt;
                        &lt;/v-simple-table&gt;
                      &lt;/template&gt;
                     &lt;AddPortfolioFundComponent&gt;&lt;/AddPortfolioFundComponent&gt;
                      &lt;SellPortfolioFundComponent&gt;&lt;/SellPortfolioFundComponent&gt;
                      &lt;v-list-item-action&gt;
                        &lt;v-layout row class="ml-auto"&gt;
                          &lt;v-btn
                            elevation="0"
                            dark
                            color="green"
                            small
                            class="mr-4"
                            @click.once="createPortfolioFund(item)"
                          &gt;
                            &lt;v-icon left small&gt;mdi-plus&lt;/v-icon&gt;Kaufen
                          &lt;/v-btn&gt;
                          &lt;template v-if="!item.funds.length"&gt;&lt;/template&gt;
                          &lt;template v-else&gt;
                            &lt;v-btn
                              elevation="0"
                              dark
                              color="red"
                              small
                              v-model="selectedPortfolio2"
                              @click="sellPortFund(item)"
                            &gt;
                              &lt;v-icon left small&gt;mdi-minus&lt;/v-icon&gt;Verkaufen
                            &lt;/v-btn&gt;
                          &lt;/template&gt;
                        &lt;/v-layout&gt;
                      &lt;/v-list-item-action&gt;
                    &lt;/v-card&gt;
                  &lt;/v-card-text&gt;
                &lt;/div&gt;
              &lt;/template&gt;
            &lt;/div&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-card&gt;
    &lt;/v-dialog&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>AddPortfolioFund.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { bus } from "../../main";
  import axios from "axios";
  
    created() {
      bus.$on("ViewAddPortfolioFund", data1 =&gt; {
        this.addPortfolioFund = data1;
        console.log(data1)
      });
      bus.$on("getSelectedPortfolio", data =&gt; {
        this.selectedPortfolio = data;
      });
      bus.$on("buyFundForCustomer", editData =&gt; {
        this.editedItem = editData;
      });
    },
    mounted() {
      this.initialize();
    },
   
    methods: {
      
      formatPrice(value) {
        let val = (value / 1).toFixed(2).replace(".", ",");
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
      },
     
      buyFund() {
        let addFundToPortfolio = {
          portfolio_id: this.selectedPortfolio.portfolio_id,
          fund_id: this.getSelectedFund.fund_id,
          quantity: this.quantity,
          buying_price: this.getSelectedFund.marketprice
        };
        axios
          .post("http://localhost:8000/customer/addFund", addFundToPortfolio)
          .then(response =&gt; {
            console.log(response);
            bus.$emit('portfolio-updated')
          })
          .catch(error =&gt; {
            if (error.response.status === 401) {
              alert("Sie können pro Depot in maximal 3 Fonds investieren.")
            } 
          });
          this.addPortfolioFund = false;  
          this.actualStep = 1;
          this.selectedPortfolio.portfolio_id = null;
          this.getSelectedFund.fund_id = null;
          this.quantity = null;
          this.getSelectedFund.marketprice = null;
          this.updateIt;
      }
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>[
  {
      "portfolio_id": 7,
      "funds": [
          {
              "fund_id": 1,
              "fund_inventory_id": 8,
              "isin": "DE000DK0ECK6",
              "fund_name": "LION-GlobalChampions",
              "quantity": 87,
              "marketprice": "247.73",
              "positionswert": "21552.51",
              "performance": "4.00",
              "buying_price": "238.20"
          }
      ],
      "investment_capital": "20723.40",
      "portfolio_value": "21552.51"
  },
  {
      "portfolio_id": 16,
      "funds": [],
      "investment_capital": "0.00",
      "portfolio_value": "0.00"
  },
  {
      "portfolio_id": 22,
      "funds": [],
      "investment_capital": "0.00",
      "portfolio_value": "0.00"
  },
  {
      "portfolio_id": 80,
      "funds": [],
      "investment_capital": "0.00",
      "portfolio_value": "0.00"
  },
  {
      "portfolio_id": 81,
      "funds": [],
      "investment_capital": "0.00",
      "portfolio_value": "0.00"
  }
  </code></pre>
  
  <p>]</p>