как передать ссылку через шину событий, чтобы она могла быть установлена ​​в нуль

Question

Я использую Vue2 и хотел бы иметь компонент выбранного элемента, который можно использовать повторно. Он будет иметь ссылку на элемент, который может отправить сообщение по шине событий, чтобы установить для элемента значение NULL. Это также мой первый раз, когда я работаю с Vue, а не в сценарии с одним файлом - compnent / vue.

У меня есть следующий код, и я прокомментировал проблемную строку:

var bus = new Vue()

Vue.component('selected-item', {
  props: ['item'], 
  methods: {
    setToNull(item){
      bus.$emit('setToNull', item);
    }
  },
  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>   
            `
})

var vm = new Vue({
  template:`
      <div>
        <div v-if="selectedApp">
           <selected-item :item="selectedApp"></selected-item>
        </div>
        <div v-else>
          no app selected
        </div>
      </div>
   `,
    data(){
      return {
        selectedApp: {id: 1, name: 'here is my name'}
      }
    },
    mounted(){
     bus.$on('setToNull', function (item) {
      alert('within setToNull for: ' + item.name); // this works and outputs here is my name 
      item = null; // this doesn't work
    })

    }
})    

Что я делаю не так? Есть лучший способ сделать это?

edit # 1

похоже, что установка selectedApp для захвата встроенного события работает! Также убрал шину и какой-то посторонний код. Вот так:

      <selected-item @remove="selectedApp = null" :item="selectedApp"></selected-item>

https://jsfiddle.net/qnub8xen/

Answer 1

Вы можете использовать стиль обратного вызова вместо шины событий, и это позволит вам повторно использовать ваш компонент столько раз, сколько вы хотите, вот пример:

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" />

Answer 2

приведу пример

'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>

Answer 3

Это this.selectedApp, которое вы хотите установить на null

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