将目标空白添加到Vue.js中的props中的链接

时间:2018-10-02 14:52:51

标签: vue.js hyperlink

我使用ReadMore插件来裁剪页面中的文章。当点击“阅读更多”时,该插件提供了一个重定向到http链接的道具。但我需要在新标签中显示链接。道具以字符串形式接收链接。

我尝试了几种方法将目标空白属性添加到此字符串,然后再将其传递给道具。没有成功。喜欢:

http://www.example.com/page-to-see.html target=_"blank"

我在带或不带引号的情况下使用它,但是无论如何,链接都起作用,但是属性被跳过了。

有没有办法拦截它并稍后添加目标空白?

在其他问题中,我还看到了路由器链接的使用,但是我一开始不知道如何处理道具内容。

任何线索都会受到热烈欢迎

编辑:添加更多代码以更清楚地说明我尝试解决的问题:

在模板中:

<read-more  more-str="read more" :text="dwId.texte" :link="dwId.link" less-str="less" :max-chars="540"></read-more> 

我从使用Axios的数据库获取值。道具由插件文档指定。

:link 必须是一个字符串,它是从数据库获取的字符串。有用。但是正如我所解释的,我需要在一个新选项卡中打开。

编辑:我尝试过的操作

我尝试创建一个计算属性,该属性会将目标空白添加到字符串中,并在更多的props中使用它:

computed: {
  target: function() {                 
    return this.dwIds.filter((dwId) => {
        return dwId.link + target="_blank"
    });       
  }, 
}

我在这里有两个问题:首先,结果是一个对象,道具需要一个字符串。此外,我添加目标空白的方式不正确,但是我还找不到正确的语法。

1 个答案:

答案 0 :(得分:0)

您需要将其用作指令,并覆盖要传递的初始元素的某些部分。否则,无法“拦截”它。 Here's“组件”版本的代码对您没有帮助。