Laravel красноречивые данные или простые реквизиты для создания пользовательской ссылки Vue-router в Vue.Js - PullRequest
Новая
       16

Laravel красноречивые данные или простые реквизиты для создания пользовательской ссылки Vue-router в Vue.Js

0 голосов
/ 28 июня 2019

У меня есть SPA, созданный в VUE и Laravel.

Laravel возвращает запрос API, и VUE создает интерфейс, используя полученные данные.

В некоторых случаях мне возвращают код HTMLкак скомпилированные данные с помощью механизма API, имеющего ссылки внутри.

Я хотел бы использовать эти ссылки в маршрутизаторе vue, но если я верну API, имеющий такой код:

JSON code 

{
    comment: {
        'bla <strong>bla</strong> bla <router-link :to="name:\'page\'">text</router-link>'
    }
}

Затем я использую код JSON в своем шаблоне компонента, например: 

<div v-html={comment}></div>

Но это не отображается и возвращается в виде простого HTML: я вижу полужирный но не <a href='page'>text..., как мне нужно, но я получил <router-link... в виде простого текста.

Простой тест JSFiddle

Здесь демонстрационный тест , где я пытаюсь повторить проблему.Если щелкнуть ссылку Foo (верхнее меню), откроется компонент, содержащий данные с HTML-кодом внутри.Полужирный шрифт отображается правильно, но ссылка на маршрутизатор не отображается 

data: {
    msg: 'Hello World',
    comment : '<div class="comment">This is a <strong>bold</strong> <br> 
               this should be a <router-link :to="{\'name\':\'home\'}">
               router link</router-link></div>'
        }

enter image description here

Как в этом случае можно выполнить рендеринг vue-router?

1 Ответ

0 голосов
/ 28 июня 2019

Исправлено мной: https://jsfiddle.net/uncoke/92x0jhr1/

Вот мое собственное исправление :

Пользовательские данные со ссылкой: 

    { team: "<a href=\"/club/"+team.id+"\" data-to='{\"name\": \"team\",\"params\":{\"teamId\":"+ team.id+"}}'>"+ team.team+"</a> "+userCode,
 ....}

Слушатель щелчка 

mounted() {
        window.addEventListener('click', event => {
            let target = event.target;
            if (target && target.href && target.dataset.to) {
                event.preventDefault();
                const url = JSON.parse(target.dataset.to);
                //router.push({ name: 'user', params: { userId: '123' } })
                this.$router.push(url);
            }
        });
    }
...