查找文本中的特定单词，并添加链接(Vuejs)

Question

在res.data.tweets中，我从服务器获取tweets并在tweetData obj中存储每个tweet的值。在tweet_text中，我想添加一个链接到标记的twitter用户(点击标签将重定向到twitter个人资料)。我弄清楚了如何找到标记的用户，但我无法添加一个链接，无论是与。link或。href属性。

axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
// Below this line i am trying to achieve something by adding a link
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('@')) {
// word = 'this is tag'
word.link('https://twitter.com')
console.log(word.link)
}
})
})
})
})

这是显示数据的组件

<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
@
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>

Answer 1

我认为这样行不通。

您应该使用computed属性将用户名附加到twitter基础链接。然后，在你的模板中，你可以将href属性链接到computed属性。

computed: {
userLink: function () {
return "http://twitter.com/" + this.tweet.twitter_username
}
}

你现在可以使用这个"userLink">

<p class="username">
<a
:href="userLink"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>

我没有测试我写的代码，如果你需要进一步的建议，请随时告诉我;)