Vue.js - 如何从对象输出链接答案

【问题标题】：Vue.js - how to output link from an objectVue.js - 如何从对象输出链接
【发布时间】：2020-05-06 04:26:26
【问题描述】：

我想从一个对象输出一个超链接。有可能吗？

我目前在我的 store.js 中有这个，想用这个信息来输出

它在我的网站上以模态形式出现。我让它显示它，但 a href 输出为文本。

检查了这个，但这些解决方案都不适合我： Adding hyperlink in Javascript array of objects

export default {
  photos: [
    {
      name: "fox1",
      image: "fox01.jpg",
      id: 1,
      header: "Photoshoot with Fox Apparel",
      description:
        "Photoshoot with " +
        '<a href="https://fox.jp/" target="_blank">Fox</a>' +
        ", a sustainably - driven e - retailer from Canada."
    }
]
}

【问题讨论】：

你试过v-html了吗vuejs.org/v2/guide/syntax.html#Raw-HTML
我认为最好的办法是将链接提取到变量中，然后将其放入模板中的锚标记中，vue 将您的数据读取为字符串，它不知道它是 html
您不能将带有链接的属性输入到标记中吗？
谢谢，尝试了 v-html，但它会将对象内的所有内容都输出为文本（例如 [ { "name": "fox", "image": "fox01.jpg", "id" : 1, "header": "与 Fox Apparel 合影"}].

标签： javascript vue.js

【解决方案1】：

解决方法如下： https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive

<!DOCTYPE html>
    <html lang="en">
    <head>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
         <div id="app">
           <div v-html="content"></div>
         </div>
         <script>
         new Vue ({
              el: '#app',
        data: {
                content: '<h2>Hello World</h2>'
        }
                 })
       </script>
     </body>
    </html>

【讨论】：

请注意，这可能会将您的网站打开到XSS vulnerabilities。如果内容来自不受信任的用户，请勿使用此选项。