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);希望這能說明問題！我目前正在構(gòu)建一些軟件，它允許用戶將 HTML 片段放入網(wǎng)頁中，并且我的 VueJS 堆棧將動(dòng)態(tài)呈現(xiàn)博客文章。我正在嘗試找到一種方法來動(dòng)態(tài)地將組件標(biāo)記渲染到給定中，<div>而無需在其中聲明 Vue 組件標(biāo)記<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(); }});我想做的事我希望能夠刪除組件標(biāo)記，以便我的客戶只需復(fù)制并粘貼以下代碼。我可能會(huì)添加更多組件和功能，并且不希望此嵌入的大小不斷增大。一旦檢測(cè)到目標(biāo)<div>，JavaScript 就應(yīng)該處理組件數(shù)據(jù)的動(dòng)態(tài)注冊(cè)和渲染。<div id="live-blogs"></div><script type="text/javascript" src="/path/to/file/app.js"></script>到目前為止我已經(jīng)嘗試過的我嘗試過通過傳遞組件標(biāo)記，this.$el.innerHTML = componentMarkup但沒有成功。使用 VueJS 可以嗎？
1 回答
蕪湖不蕪
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊
您所需要做的就是將模板作為字符串模板從 DOM 移動(dòng)到主組件中。只要<div id="live-blogs"></div>頁面上有某個(gè)地方，它就可以工作。
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 關(guān)注
- 127 瀏覽
添加回答
舉報(bào)
0/150
提交
取消