JSON 데이터의 Vue v- 링크

Question

Vue에 비교적 익숙하므로 분명히 (또는 분명히 불가능한 경우) 용서해주십시오.

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

는 지금 링크가 페이지를 다시로드를 트리거 :

나는 (VUE-자원을 통해 편안하고 API에서 가져온) JSON 데이터의 집합을 가지고있다. vue-router v-link이라면 문제가되지 않습니다. (

이 시점에서

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

, 템플릿이 이미 구문 분석하고, 뷰는 더 이상 V-링크를 생성하지 않습니다 그러나,이 (따옴표는 물론, 데이터에 이스케이프) 작동하지 않습니다 렌더링 된 HTML에서 v- 링크로 표시됩니다).

최종 결과는 내 CMS에 HTML 또는 Vue 형식의 링크를 포함 할 수 있고 Vue가 v-link로 올바르게 경로를 지정했음을 의미합니다.

Vue에서 JSON 데이터의 링크를 해석하도록 할 수있는 방법이 있습니까?

Answer 1

나는

간단한 예

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'); 

자바 스크립트

<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> 

HTML

Codepen에 비슷한 문제에 직면 다른 사람을 Vue Chat의 질문에 대답하고, 경우에 여기를 작성했습니다