Laravel雄辩的数据或简单的道具在Vue.Js中创建自定义Vue-路由器链接 [英] Laravel eloquent data or simple props to create a custom Vue-router link in Vue.Js

问题描述

我有一个用VUE和Laravel制成的SPA.

I have a SPA made in VUE and Laravel.

Laravel返回API请求，VUE使用接收到的数据创建前端.

Laravel returns API request and VUE create the frontend using the received data.

在某些情况下，API引擎内部具有链接，因此我将一些HTML代码作为编译数据返回.

In a few cases, I have some HTML code returned as compiled data by API engine having links inside.

我想在vue路由器中使用这些链接，但是如果我返回的API具有如下代码:

I would like to use these links in vue router but if I return the API having code like this:

JSON代码

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

然后，我在组件模板中使用JSON代码，例如:

Then I use the JSON code in my component template like:

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

但这不会呈现并以纯HTML格式返回:我看到的是粗体，但没有看到<a href='page'>text...，但是我将<router-link...作为纯文本.

But this is not rendered and returned as plain HTML: I see the bold but not the <a href='page'>text... as I need but I got <router-link... as plain text.

简单的JSFiddle测试

在演示测试中，我尝试复制该问题.如果单击Foo Link(顶部菜单)，它将打开一个组件，其中包含带有HTML代码的props数据.粗体显示正确，但路由器链接未呈现

Here a demo test where I try to replicate the issue. If you click on Foo Link (Top menu) it open a component having props data with HTML code inside. The bold is shown properly but the router link is not rendered

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>'
        }

在这种情况下如何强制vue-router渲染?

How can I force the vue-router render in this case?

推荐答案

由我自己解决: https://jsfiddle.net/uncoke/92x0jhr1/

这是我自己的修复程序:

带有链接的自定义数据:

The custom data with link:

    { 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);
            }
        });
    }

这篇关于Laravel雄辩的数据或简单的道具在Vue.Js中创建自定义Vue-路由器链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！