Почему недавно вставленный компонент с тегом router-link вместо одного элемента с определенным индексом в v-for выдаёт ошибку? - PullRequest
Новая
       13

Почему недавно вставленный компонент с тегом router-link вместо одного элемента с определенным индексом в v-for выдаёт ошибку?

0 голосов
/ 29 мая 2019

Когда я использую тег router-link в динамически создаваемом компоненте (используя новое Vue ({})), он выдает ошибку 

[Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"

found in 
  RouterLink
     Root

https://pasteboard.co/IgViweP.png https://imgur.com/a/zi2ZgIA

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

Я пытался использовать тег (ссылка). Это работает, но отчасти устраняет ощущение использования SPA.

Для более подробного объяснения, компонент note-single генерирует событие восстановления, которое вызывает метод восстановления 

<template>

    <ul class="mt-1 p-0 list-unstyled clearfix" v-if="showData && data.data && data.data.length">
        <li v-for="(singleResult, index) in data.data" ref="items" class="list-group-item mb-2">

            <note-single-list-item-deleted v-else-if="singleResult.contentType === 'notes'" :note="singleResult" @restore="restore($event, index)"></note-single-list-item-deleted>

        </li>
    </ul>

</template>

<script>
    import noteSingleListItemDeleted from './content-type-comps-deleted/note-single-list-item-deleted';

    export default {
        components : {
            'note-single-list-item-deleted' : noteSingleListItemDeleted,

        },
        data() {
            return {
                showLoadingAnimation: false,
                showData: false,
                data: {},
                dataRequestSent : false,
                contentType: "notes",
                restoreRequestSent : false,

            }
        },
        methods: {

            getRestoredLinkTemplate(contentType, id) {
                let contentTypeLink;
                let contentTypeToDisplay;
                if(contentType === 'notes') {
                    contentTypeLink = '/note/' + id;
                    contentTypeToDisplay = 'note'
                }

                // this give error ---------------
                let temp = new Vue({
                    template: '<div><router-link :to="link"><p class="m-0 p-0">Go to restored {{ contentTypeToDisplay }}</p></router-link></div>',
                    data () {
                        return {
                            link: contentTypeLink,
                            contentTypeToDisplay : contentTypeToDisplay
                        }
                    }
                });

                // this works ------------------
                // let temp = new Vue({
                //     template: '<div class="m-0 p-0"><a :href="link" target="_blank"><p class="m-0 p-0">Go to restored {{ contentTypeToDisplay }}</p></a></div>',
                //     data () {
                //         return {
                //             link: contentTypeLink,
                //             contentTypeToDisplay : contentTypeToDisplay
                //         }
                //     }
                // });

                return temp;
            },

            restore(item, index){

                if(this.restoreRequestSent) {
                    return;
                }
                this.restoreRequestSent = true;

                axios.post('/trash/restore', item).then((response) => {

                    let newLink = this.getRestoredLinkTemplate(response.data.content_type, response.data.id).$mount().$el;

                    this.$refs.items[index].innerHTML = "";

                    this.$refs.items[index].appendChild(newLink);

                    this.restoreRequestSent = false;

                });
            },

        },
    }
</script>

Я ожидаю, что вместо недавно восстановленного элемента появится ссылка для перехода к этому элементу. Как и в пользовательском интерфейсе, я хочу это => https://pasteboard.co/IgW7QU1.png / https://imgur.com/a/NZiSgPe

...