vue-component - Vue.js我如何循环抛出一个数组以根据数组项将组件添加到dom

Question

我正在制作一个与 api 通信并获取数据的应用程序，主页每天都在变化，所以我不能只向它添加静态组件，我需要根据来自 api 的数据来创建它。

我有一个名为的主页组件Home.vue

这个组件可以有一个或多个轮播，具体取决于我正在获取的数据。

我也有Carousel.vue负责显示图像的，它有自己的props。

问题是 ：

如何从循环将组件添加到dom

这就是Home.vue我正在制作的地方loop：

    <template>
      <div>
    
    
        <!--I Need The Loop right here-->
    
    
      </div>
    </template>
    
    <script>
    
      export default {
        components: {},
        data() {
          return {
            page_content: [],
            widgets: [],
    
          }
        },
        created() {
          this.getHomeContent();
        },
        methods:
          {
    
            getHomeContent() {
              window.axios.get(window.main_urls["home-content"]).then(response => {
                this.page_content = JSON.parse(JSON.stringify(response.data));
                console.log(this.page_content);
                for (let index in this.page_content) {
                  switch (this.page_content[index].type) {
    //                if type is banner
                    case 'banner':
                      switch (this.page_content[index].display) {
    //                    if display is carousel
                        case 'carousel':
                          console.log('carousel')
                          // end if display is carousel
                          this.widgets.push({
                            'type': 'Carousel',
                            'images': this.page_content[index].items,
    
                          })
                      }
    
    //                  end if type is banner
    
                  }
                }
    
              });
            }
          }
      }
    </script>

这是Carousel.vue我需要在需要时通过传递道具导入的：

    <template>
    <div>
        <div >
          <VueSlickCarousel>
            <div v-for="image in images">
              <img src="{{img}}">
            </div>
          </VueSlickCarousel>
        </div>
    </div>
    </template>
    <script>
      import VueSlickCarousel from 'vue-slick-carousel'
      import 'vue-slick-carousel/dist/vue-slick-carousel.css'
    
      import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
      export default
      {
        components: {VueSlickCarousel},
        name:'Carousel',
        props:[
    
          'images'
        ],
    
        methods:
          {
    
          }
      }
    </script>

如何动态添加Carousel.vue组件，例如：Home.vue

if(data.display == 'carousel')
{
   <carousel images="data.images"></carousel>
}

标签： vue-component

Answer 1

这是正确答案！

    <template>
      <div>


        <template v-for="widget in widgets">

          <div v-if="widget.type == 'carousel'" :key="widget.type">
            <carousel
              :images="widget.images"
              :arrows ="widget.arrows"
              :dots = "widget.dots"
            >

            </carousel>
          </div>

        </template>


      </div>
    </template>

    <script>
      import Carousel from './widgets/Carousel.vue'
      export default {
        components: {Carousel},
        data() {
          return {
            page_content: [],
            widgets: [],

          }
        },
        created() {
          this.getHomeContent();
        },
        methods:
          {

            getHomeContent() {
              window.axios.get(window.main_urls["home-content"]).then(response => {
                this.page_content = JSON.parse(JSON.stringify(response.data));
                console.log(this.page_content);
                for (let index in this.page_content) {
                  switch (this.page_content[index].type) {
    //                if type is banner
                    case 'banner':
                      switch (this.page_content[index].display) {
    //                    if display is carousel
                        case 'carousel':
                          console.log('carousel')
                          // end if display is carousel
                          this.widgets.push({
                            'type': 'carousel',
                            'arrows':true,
                            'dots':true,
                            'images': this.page_content[index].items,
                          })
                      }

    //                  end if type is banner

                  }
                }

              });
            }
          }
      }
    </script>