JSON 数据中的 Vue v-links

Question

我对 Vue 比较陌生，如果这是显而易见的（或显然不可能的），请原谅我。

我有一组 JSON 数据（通过 vue-resource 从 RESTful API 中获取）：

{content: "This is content. <a href='/blog'> Link to blog </a>"}

现在，link 触发页面重新加载。如果它是一个 vue-router v-link，那将不是问题。但是，这不起作用（当然，引号在数据中被转义）：

{content: "This is content. <a v-link="{ path: '/blog' }"> Link to blog </a>"}

此时，模板已经被解析，Vue 将不再创建 v-link（它只会在渲染的 [= 中显示为 v-link 30=]).

我的最终结果理想情况下意味着我可以在我的 CMS 中包含 HTML 或 Vue 格式的 link，并让 Vue 将它们正确路由为 v-link秒。

我可以做些什么让 Vue 解释 JSON 数据中的 link 吗？

Answer 1

我已经回答了 Vue Chat 上的问题，并写在这里以防其他人遇到类似问题

Codepen

上的简化示例

HTML

<div id="app">
  <div>
    <a v-link= "{path:'/home'}">Go to home</a>
  </div>
  <router-view></router-view>
</div>
<template id="home">
  <div>
    <div>
      Fetched Content:
    </div>
    <div>
      {{{ fetchedContent }}}
    </div>
  </div>
</template>
<template id="route1">
  <div>
    Route1 view
  </div>
</template>
<template id="route2">
  <div>
    Route2 view, this is different from Route1
  </div>
</template>

javascript

function getContent (callback) {
  var content = 'Click this: <a href="/route1">Go to route1</a> and <a href="/route2">Go to route2</a>'
  setTimeout(function () { callback(content) }, 1000)
}
var Home = Vue.component('home',{
  template:'#home',
  data: function () {
    return {
      fetchedContent: 'Loading...'
    };
  },
  ready: function () {
    var self = this
    var router = this.$router

    getContent( function (result) {
      self.fetchedContent = result;
      Vue.nextTick(function () {
        var hyperLinks = self.$el.getElementsByTagName('a')
        Array.prototype.forEach.call(hyperLinks, function (a) {
          a.onclick = function (e) { 
            e.preventDefault()
            router.go({ path: a.getAttribute("href") })
          }
        })
      })
    })
  }
});
var Route1 = Vue.component('route1', {
  template: '#route1'
});
var Route2 = Vue.component('route2', {
  template: "#route2"
});
var router = new VueRouter({
    hashbang:false,
    history:true
});
router.map({
    '/home':{
      component:Home
    },
    '/route1':{
      component:Route1
    },
    '/route2':{
      component:Route2
    }
});
router.start({
}, '#app');

Answer 2

我在这里有一个类似的解决方案：question 在我的 JSON 代码中使用自定义数据集和点击侦听器来处理它：

mounted() {
window.addEventListener('click', event => {
    let target = event.target
    if (target && target.href && target.dataset.url) {
        event.preventDefault();
        console.log(target.dataset.url);
       const url = JSON.parse(target.dataset.url);
        console.log(url.name)
       this.$router.push(url.name);
    } 
});

},

JSON 数据中的 Vue v-links

Vue v-links in JSON data

javascript

jquery

json

vue.js

vue-router