如何在 Vuex 中向 getter 响应添加链接（或任何 html）？答案

【问题标题】：How to add a link (or any html) to a getter response in Vuex?如何在 Vuex 中向 getter 响应添加链接（或任何 html）？
【发布时间】：2019-07-31 12:50:13
【问题描述】：

我正在使用 Vue 和 Vuex 构建一个区块链浏览器，但我偶然发现了一个迄今为止我无法解决的问题。

基本上我有一个 getter，它根据操作名称返回完整的事务信息。例如，如果操作是po_transfer，我想向用户详细说明此特定操作(@mat sent 10 BTC to @ned) 的资产类型、数量、发送方和接收方。

由于我从一个特定区块链的不同应用程序和游戏中收集数据，因此我有几十个这样的操作（转移、打开、取消、出售、购买、发行、构建、探索、升级等）。因此，我创建了一个 getter，它以人类可读的形式返回所有这些，而不是 po_transfer。

它与文本完美搭配，但我还需要在回复中添加一个链接。在我们之前的示例中，(@mat sent 10 BTC to @ned)@mat 和 @ned 应该是指向我为它们设置的通讯网站的链接。

所以我的问题是 - 如何在 Vuex getter 响应中添加链接？

我已经尝试使用带有document.body.appendChild(myLink) 的纯javascript，但它只显示一个href 文本（http://somewebsite.com/@mat），而不是实际给我一个指向这个href 的嵌入式链接（@mat）。

这是我现在拥有的：

 dappInfo: (state, getters) => (op, id) => {
   if (op === 'transfer') {
     return getters.dappJsonByTrxId(id).from + ' sent ' + 
            getters.dappJsonByTrxId(id).amount + 
          ` to @${getters.dappJsonByTrxId(id).to}` 
   }
 }

   dappJsonByTrxId: (state) => (id) => {
     return state.transactions.find(t => t.transaction_id === id).operations[0][1] || ''
   }

我需要这个getters.dappJsonByTrxId(id).from 来返回@mat。

<a href=`example.com/${getters.dappJsonByTrxId(id).from}> @${getters.dappJsonByTrxId(id).from}<a/> 也不行。它以文本形式返回我<a>..</a>。

我假设你不应该在 getter 中返回 html，但我真的需要解决这个问题，因为其他一切都在工作。非常感谢任何帮助。提前致谢。

附：可以查看资源管理器的demoright here。

【问题讨论】：

标签： vuejs2 vuex

【解决方案1】：

您可以输出包含所有 html 标签的字符串值 <a href=".... /> 在 getter 中组成，然后使用 v-html 指令将其输出为 html，f.e. <div v-html="yourJsString"/>.

当用 html 编写字符串时，ecmaScript 模板又名字符串插值可能会派上用场。

【讨论】：