var customerID = "cus_1234xxx..."; // Retrieved from session or DBvar options = new ChargeListOptions { Limit = 3, Customer = customerID };var service = new ChargeService();StripeList<Charge> charges = service.List( options);希望這能說明問題！我目前正在構建一些軟件，它允許用戶將 HTML 片段放入網頁中，并且我的 VueJS 堆棧將動態呈現博客文章。我正在嘗試找到一種方法來動態地將組件標記渲染到給定中，<div>而無需在其中聲明 Vue 組件標記<div>- 以避免客戶感到困惑。這是工作代碼的示例：<div id="live-blogs" v-cloak> <live-blog v-for="blog in blogs" :key="blog.id" :title="blog.title" ></live-blog></div>Vue.component('live-blog', { props: ['id', 'title'], template: '<div class="lb-entry">{{ title }}</div>',});const liveBlogs = new Vue({ el: '#live-blogs', data: { blogs: [], }, methods: { getLiveBlogs: function() { request.get('/read/' + id) .then(function (response) { liveBlogs.blogs = response.data.data; }) } }, mounted() { this.getLiveBlogs(); }});我想做的事我希望能夠刪除組件標記，以便我的客戶只需復制并粘貼以下代碼。我可能會添加更多組件和功能，并且不希望此嵌入的大小不斷增大。一旦檢測到目標<div>，JavaScript 就應該處理組件數據的動態注冊和渲染。<div id="live-blogs"></div><script type="text/javascript" src="/path/to/file/app.js"></script>到目前為止我已經嘗試過的我嘗試過通過傳遞組件標記，this.$el.innerHTML = componentMarkup但沒有成功。使用 VueJS 可以嗎？
1 回答
蕪湖不蕪
TA貢獻1796條經驗 獲得超7個贊
您所需要做的就是將模板作為字符串模板從 DOM 移動到主組件中。只要<div id="live-blogs"></div>頁面上有某個地方，它就可以工作。
Vue.component('live-blog', {
props: ['id', 'title'],
template: '<div class="lb-entry">{{ title }}</div>',
});
new Vue({
el: '#live-blogs',
template: `
<div>
<live-blog
v-for="blog in blogs"
:key="blog.id"
:title="blog.title"
/>
</div>`,
data() {
return {
blogs: [],
};
},
methods: {
getLiveBlogs() {
request.get('/read/' + id)
.then(response => {
this.blogs = response.data.data;
});
},
},
mounted() {
this.getLiveBlogs();
},
});
- 1 回答
- 0 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消