Как отрендерить компонент vuejs при отправке сиблинга - PullRequest
Новая
       35

Как отрендерить компонент vuejs при отправке сиблинга

2 голосов
/ 08 мая 2020

У меня есть следующий код 

<body>
   <div class="content" id="app">
      <file-management></file-management>
      <attachment-list></attachment-list>
   </div>


   <script src="{{ asset('js/app.js') }}"></script>
</body>

Код компонента FileManagement: 

<template>
    <div>
        <button type="button" @click="storeList()">
            Save
        </button>
    </div>
</template>


<script>
    export default {
        methods: {
            storeList: function () {
                axios.post('/list', this.data, config)
                    .then(() => {
                      // on save I want to be able to load the table again that is found in AttachmentList component  
                    });
            },
        }
    }
</script>

Код компонента AttachmentList: 

<template>
    <div>
        <tr v-for="attachment in attachments" :key="attachment.id">
            <td>{{ attachment.name }}</td>
        </tr>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                attachments: []
            }
        },
        methods: {
            getList() {
                axios.get(`/list`)
                    .then((data) => {
                        this.attachments = data;
                    });
            }
        }
    }
</script>

Я хочу, чтобы Я хочу иметь возможность загружать таблицу списка, когда я нажимаю кнопку «Сохранить» в другом компоненте (после завершения почтового запроса). Как я смогу этого добиться?

Ответы [ 2 ]

1 голос
/ 08 мая 2020

Самый простой способ - заставить ваш компонент FileManagement генерировать событие, которое родитель может прослушивать, а затем запускать метод AttachmentList#getList().

Например, 

// in AttachmentList
methods: {
  async storeList () {
    await axios.post('/list', this.data, config)
    this.$emit('list-updated')
  }
}

и в родительском шаблоне 

<file-management @list-updated="$refs.list.getList()"></file-management>
<attachment-list ref="list"></attachment-list>
0 голосов
/ 08 мая 2020

Вот как я бы продолжил.

  • создать родительский компонент для братьев и сестер.
  • добавить к нему логический элемент данных (флаг) со статусом нажатой кнопки.
  • испускать сигнал от FileManagement при нажатии кнопки.
  • catch этот сигнал в родительском компоненте для установки флага.
  • передать этот флаг компоненту AttachmentList в качестве опоры.
  • использовать этот флаг внутри v-if, чтобы показать / скрыть таблица.
...