第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

動態(tài)地將組件標記傳遞給 Vue 實例

動態(tài)地將組件標記傳遞給 Vue 實例

江戶川亂折騰 2024-01-22 16:53:32
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 片段放入網(wǎng)頁中,并且我的 VueJS 堆棧將動態(tài)呈現(xiàn)博客文章。我正在嘗試找到一種方法來動態(tài)地將組件標記渲染到給定中,<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 就應該處理組件數(shù)據(jù)的動態(tài)注冊和渲染。<div id="live-blogs"></div><script type="text/javascript" src="/path/to/file/app.js"></script>到目前為止我已經(jīng)嘗試過的我嘗試過通過傳遞組件標記,this.$el.innerHTML = componentMarkup但沒有成功。使用 VueJS 可以嗎?
查看完整描述

1 回答

?
蕪湖不蕪

TA貢獻1796條經(jīng)驗 獲得超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();

  },

});


查看完整回答
反對 回復 2024-01-22
  • 1 回答
  • 0 關注
  • 143 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號