[Vuejs]-How to pass a reference via an event bus so that it could be set to null

by

0👍

It’s this.selectedApp you want to set to null

mounted(){
 bus.$on('setToNull', function (item) {
  alert('within setToNull for: ' + item.name);
  this.selectedApp = null;
})

0👍

You could use a callback style instead of event bus and it will let you to reuse your component as many times you want, here is an example: 

Vue.component('selected-item', {
  props: ['item', 'callback', 'objName'], 
  methods: {
    setToNull() {
      this.callback(this.objName);
    }
  },
  template: `
    <div v-if="item && item.name">
      <div class="button round btn-app-class selected-btn">
        {{item.name}}
        <span class='btn-delete link' @click="setToNull">x</span>
      </div>
    </div>
  `
})

var vm = new Vue({
  el: '#app',
  template:
  `
  <div>
     <div>
    	<selected-item 
      	    :item="selectedApp"
            :callback="callback"
            :objName="'selectedApp'"
        />
        <selected-item 
      	    :item="selectedApp2"
            :callback="callback"
            :objName="'selectedApp2'"
        />
        <selected-item 
      	    :item="selectedApp3"
            :callback="callback"
            :objName="'selectedApp3'"
        />
    </div>
    <div v-else>
    	no app selected
    </div>
  </div>
 `,
 data() {
     return {
        selectedApp: {id: 1, name: 'here is my name1'},
        selectedApp2: {id: 2, name: 'here is my name2'},
        selectedApp3: {id: 1, name: 'here is my name3'}
     }
 },
 methods: {
 	callback(objName) {
        console.log('object name received on callback ' + objName);
        this[objName] = null;
        console.log('clean value from local parent state');
        console.log(this[objName]);
    }
 }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" />

0👍

give you an example

'use strict'
const bus = new Vue;

const selectedItem = {
  template: '#selectedItemTpl',
  props: ['item'],
  methods: {
    setToNull(item) {
      bus.$emit('remove-item', item);
    }
  }
}

var app = new Vue({
  el: '#app',
  components: {selectedItem},
  data (){
    return {
      selectedItems: new Array(5).fill('').map((o,i)=>({id:i,name:'item-'+i}))
    }
  },
  created () {
    bus.$on('remove-item',item=>{
      let items = this.selectedItems;
      for(let i=0;i<items.length;i++){
        if(item.id==items[i].id){
          items.splice(i,1)
          break;
        }						
      }
    })
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
		<div v-for="item in selectedItems" :key="item.id">
			<selected-item :item="item"></selected-item>
		</div>
	</div>

	<script id="selectedItemTpl" type="text/x-template">
		<span>
			<div class="button round btn-app-class selected-btn">{{item.name}}<sup><span class='btn-delete link' @click="setToNull(item)">x</span></sup></div>
		</span>
	</script>

Leave a comment