CODEWITHSUNDEEP
javascriptangularvue.jsvuejs2
McAngujo
McAngujo

Reputation: 115

VueJS independent components events

I have a component that emit event through a bus as indicated below. The same component need to be included twice on another component. I want the events emitted to populate different variables;

    //component.vue
    <template>
        <div>
            Hello there?
            <a @click="changed">New</a>

            <ol>
               <li v-for="option in list">
                   <div class='row justify-content-start'>
                      <div class='col-sm-6'><input v-model="option.value" type='text' placeholder="key"/></div>
                      <div class='col-sm-6'><input v-model="option.name" type='text' placeholder="Name"/></div>
                   </div>
               </li>
            </ol>
        </div>
    </template>
    <script>
      export default{
            props:['options','iscolumn'],
            data(){
                  return {list:this.options,item:{name:'',value:''}}
            },
            methods:{
                  changed(){
                        $bus.$emit('add-option',this.item,this.iscolumn);
                  }
            }
      }
    </script>
/** root.vue **/

<template>
      <div>
            <h3>Rows</h3>
            <div><rows :options="rows" :iscolumn="false"/></div>


            <h3>Columns</h3>
            <div><rows :options="columns" :iscolumn="true" /></div>
      </div>
</template>

<script>
      export default{
            components:{'rows':require('./component')},
            data(){
                  return {
                        columns:[],rows:[]
                  }
            },
            created(){
                  this.$bus.$on('add-option',(option,iscolumn)=>{
                        if (is_column) {this.columns.push(option);}
                        else this.rows.push(option);
                  })
            }
      }
</script>

When I click on the New from root both columns and rows get populated. Looking for case where each of the component are independent, can't understand how they are sharing variables. Any assistance will be appreciated.

Upvotes: 1

Views: 59

Answers (1)

Brian Lee
Brian Lee

Reputation: 18197

Assign unique key attributes to the rows components:

<template>
    <div>
        <h3>Rows</h3>
        <div><rows key="rows1" :options="rows" :iscolumn="false"/></div>

        <h3>Columns</h3>
        <div><rows key="rows2" :options="columns" :iscolumn="true" /></div>
    </div>
</template>

Upvotes: 1

Related Questions