Vue JS 标签不会从 JSON 呈现为 HTML答案

【问题标题】：Vue JS Tags Won't Render to HTML From JSONVue JS 标签不会从 JSON 呈现为 HTML
【发布时间】：2020-05-08 06:40:12
【问题描述】：

我有包含href 等HTML 标签的JSON，如何在不刷新页面的情况下点击它？我已经搜索过了，但没有人在工作......

表格

JSON

我正在使用 JSON 数据表。

【问题讨论】：

你能用适当的例子和你的工作更新这个问题吗？
你使用过@click.prevent 吗？
任何 vue js 标记和脚本（如 @click）在 json 中都不起作用，请参见图片..
标签应该渲染成 href，但是因为它来自 json 它不会渲染..

标签： javascript vue.js href vue-router

【解决方案1】：

对我来说，您似乎需要使用身份验证保护

看这里 https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

您必须尝试的第一件事是，当您使用此处的代码点击您的路线时，您是否能够记录一些内容

router.beforeEach((to, from, next) => {
  console.log(to);
  console.log(from);
})

如果这条特定路线成功，请尝试关注

beforeRouteLeave (to, from, next) {  
  if (to === "edit") {    
    next(false)
  }
}

【讨论】：

【解决方案2】：

除非您使用full build，否则您不能不幸地像这样动态添加组件。阅读Template Compilation 以及如何make use of it。

但在大多数情况下（除非您是服务器端渲染），您希望将路由器链接属性作为对象传递，例如：

const jsonData = [
  {
    id: 2,
    title: 'First Vue JS',
    body: 'Vue JS',
    aksi: {
      text: 'Edit',
      attrs: {
        to: {
          name: 'edit',
          params: {
            // Assuming you have the `post` item here (usually while doing `v-for`)
            id: post.id
          }
        },
        class: 'btn btn-primary'
      }
    }
  }
]

并渲染它们，例如：

<table>
  <tr v-for="item in jsonData" :key="item.id">
    <td>{{item.title}}</td>
    <td>{{item.body}}</td>
    <td>
      <router-link v-bind="item.attrs">{{item.aksi.text}}</router-link>
    </td>
  </tr>
</table>

如果您没有在模板中循环它们，您可能想弄清楚如何执行column rendering 并在其中自定义这个特定的单元格。

【讨论】：

顺便说一下 react js 或 angular 怎么样？ laravel 和 json 数据哪个更灵活？？
好吧，这个问题无关紧要，但我可以说这不是哪个框架的问题，而是你如何做的问题，因为这些框架是建立在 Javascript 之上的。