Vue: отправить в массив при событии

У меня есть два отдельных компонента Vue, которым нужно общаться друг с другом через шину событий. Нравиться:

форма-компонент.Vue

import events from './events'
export default {
   ...
   methods() {
     sumbitForm() {
       events.$emit('form-submitted', data)
     }
   }
   ...
}

другой-компонент.Vue

import events from './events'
export default {
  ....
  mounted() {
    events.$on('form-submitted, data => {
      this.list.push(data);
    }
  },
  data() {
    return {
      list: []
    }
  }
  ....
}

Но когда событие прослушивается, «this» относится не к «другому компоненту», а к фактическим «событиям» шины событий.

Как мне решить эту проблему?

Ваш синтаксис здесь не соответствует {

Roy J 11.04.2018 14:05

Извините, это просто упрощенный код, который я придумал, чтобы решить проблему. Редактировать код в текстовом поле stackoverflow не очень хорошо, ха-ха

CPN 11.04.2018 14:14
0
2
7 463
2

Ответы 2

Одним из решений было бы скопировать this в переменную снаружи и использовать ее для доступа к свойствам данных компонента. Например, это должно работать:

import events from './events'
export default {
  ....
  mounted() {
    var that = this;
    events.$on('form-submitted, function(data) {
      that.list.push(data);
    )
  },
  data() {
    return {
      list: []
    }
  }
  ....
}

Просто попробовал это, но все еще не распознает «список» как массив. Я получаю «TypeError: list.push не является функцией».

CPN 11.04.2018 14:15

Когда я делаю что-то вроде «that.list = []; that.list.push (data);» он действительно работает, но, очевидно, он переопределяет любые данные, которые у меня могли быть в массиве в первую очередь

CPN 11.04.2018 14:17

Обновлен ответ, пожалуйста, не используйте стрелочные функции, поскольку стрелочная функция связывает это с родительским контекстом.

Gaurav 11.04.2018 14:22

Стрелочные функции прекрасны внутри методов. Вы не хотите использовать их для определения методов или перехватчиков жизненного цикла.

Roy J 11.04.2018 14:36

Мне кажется, вы неправильно понимаете проблему. Стрелочная функция связывает свой контекст, и контекст этой стрелочной функции правильно привязан к другому компоненту, потому что он находится внутри метода, а методы автоматически привязываются к своим компонентам. Приведенный ниже пример работает должным образом.

const events = new Vue();

Vue.component('formComponent', {
  template: '<button @click="submitForm">Submit</button>',
  methods: {
    submitForm() {
      events.$emit('form-submitted', {
        foo: 1
      });
    }
  }
});

Vue.component('otherComponent', {
  template: '<div><div v-for="item in list">{{item}}</div></div>',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    events.$on('form-submitted', data => {
      this.list.push(data);
    });
  }
});

new Vue({
  el: '#app'
});
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <form-component></form-component>
  <other-component></other-component>
</div>

Это сработало. Проблема заключалась в том, что у меня есть HTTP-запрос после него, который переопределяет массив. По какой-то причине, если я помещаю его над слушателем событий, он ничего не портит .. странно.

CPN 11.04.2018 14:42

Другие вопросы по теме