title: How to use bootstrap carousel in Vue.js
body: <p>I am quite new in vue and I am trying to make a bootstrap carousel using bootstrap.</p>
  <pre><code>&lt;template&gt;
      &lt;!-- Start Banner Hero --&gt;
      &lt;div
        id=&quot;webshop-hero-carousel&quot;
        class=&quot;carousel slide&quot;
        data-bs-ride=&quot;carousel&quot;
      &gt;
        &lt;ol class=&quot;carousel-indicators&quot;&gt;
          &lt;li
            data-bs-target=&quot;#webshop-hero-carousel&quot;
            data-bs-slide-to=&quot;0&quot;
            class=&quot;active&quot;
          &gt;&lt;/li&gt;
          &lt;li
            data-bs-target=&quot;#webshop-hero-carousel&quot;
            data-bs-slide-to=&quot;1&quot;
          &gt;&lt;/li&gt;
          &lt;li
            data-bs-target=&quot;#webshop-hero-carousel&quot;
            data-bs-slide-to=&quot;2&quot;
          &gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class=&quot;carousel-inner&quot;&gt;
          &lt;div class=&quot;carousel-item&quot; v-for=&quot;picture in pictures&quot; :key=&quot;'picture-' + picture.id&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row p-5&quot;&gt;
                &lt;div class=&quot;col-lg-6 mb-0 d-flex align-items-center&quot;&gt;
                  &lt;div class=&quot;text-align-left align-self-center&quot;&gt;
                    &lt;!-- &lt;h1 class=&quot;h1 text-success&quot;&gt;&lt;b&gt;Jassa&lt;/b&gt; eCommerce&lt;/h1&gt; --&gt;
                    &lt;h3 class=&quot;h2&quot;&gt;{{picture.text}}&lt;/h3&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a
          class=&quot;carousel-control-prev text-decoration-none w-auto ps-3&quot;
          href=&quot;#webshop-hero-carousel&quot;
          role=&quot;button&quot;
          data-bs-slide=&quot;prev&quot;
        &gt;
          &lt;i class=&quot;fas fa-chevron-left&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;a
          class=&quot;carousel-control-next text-decoration-none w-auto pe-3&quot;
          href=&quot;#webshop-hero-carousel&quot;
          role=&quot;button&quot;
          data-bs-slide=&quot;next&quot;
        &gt;
          &lt;i class=&quot;fas fa-chevron-right&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- End Banner Hero --&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data() {
      return {
        pictures: [
          {
            id: 1,
            text: &quot;Freibad&quot;,
          },
          {
            id: 2,
            text: &quot;Hallenbad&quot;,
          },
        ],
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>So here is my component but it doesnt work properly. I basically just want to show {{picture.text}} on each carousel but it doesnt display anything properly.</p>