Блог

Главная - Вопросы по программированию - Событие компонента Vue запускается, но ничего не делает

Событие компонента Vue запускается, но ничего не делает

#javascript #vue.js

Вопрос:

Это мой код:

Компонент таблицы:

 <template>
     <rowcomponent @reloadTable="fetchData(pagination.current_page)" :item_data="item" :isDOMadd="false" :workflowoffer_id="workflowoffer_id"></rowcomponent >
</template

<script>
import rowcomponent from "./rowcomponent";

export default{
  methods :{
    fetchData(url){
      console.log('test');
    },
      components: {
            rowcomponent,
      },
  }
}
</script>

Компонент строки:

 <script>
    export default{
      methods :{
        safeData(){
         console.log('safe');
         this.$emit('reloadTable');
        }
      },

    }
    </script>

Вывод на консоль:

 safe

Событие Vue запускается (vue-devtool), но оно ничего не делает

я знаю, что это должно сработать, но это не так. У кого-нибудь есть какие-нибудь решения или советы, что это может быть.

ОБНОВЛЕНИЕ: Итак, я нашел ошибку, но не могу ее объяснить ^^ Я добавляю эту строку в компонент таблицы в export default {...} :

 name: "TableComponent",

и теперь это работает**

Комментарии:

1. Является ли компонент 2 компонентом строки? Почему вы импортируете rowcomponent в компоненте 1, но объявляете его в компоненте 2?

2. @Laerte Я изменил его в вопросе, теперь он лучше

3. Вы должны объявить components: { rowcomponent } на табличном компоненте. И попробуйте изменить @reloadTable="fetchData(pagination.current_page)" @reloadTable="fetchData()" , и метод fetchData() только на

4. это уже отредактированная ошибка компонента. я также попытался вызвать fetchData без параметра 🙁

5. Еще одна вещь, измените reloadTable на reload-table . Верхний регистр может испортить эмиссию. this.$emit('reload-table') и @reload-table

Ответ №1:

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

Родительский компонент:

 
<template>
  <div id="app">
    <rowcomponent @reloadTable="reloadTable" />
  </div>
</template>

<script>
import rowcomponent from "./components/rowcomponent";

export default {
  name: "App",
  methods: {
    reloadTable () {
      console.log("test")
    }
  },
  components: {
    rowcomponent
  }
};
</script>

компонент строки

 
<template>
  <div class="hello">
    click me to see the results
    <button @click="safeData"> click me </button>
  </div>
</template>

<script>
export default {
  name: "rowcomponent",
  methods :{
        safeData(){
         console.log('safe');
         this.$emit('reloadTable');
        }
      }
};
</script>

Выход будет : безопасный и тестовый

Метки: ,