title: Binding a Component property in Vue
body: <p>Good day everyone! I'm currently learning vue and I'm following a youtube tutorial on building an image carousel from scratch. Here's the code for the Image Carousel parent component: </p>
  
  <pre><code>&lt;template&gt;
  &lt;div class = "slides"&gt;
      &lt;div class = "slides-inner"&gt;
          &lt;div v-for= "slide in slides"&gt;
             &lt;Slide v-bind:slide= "slide"&gt;&lt;/Slide&gt;
          &lt;/div&gt;
      &lt;/div&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
      import Slide from './Slide';
  
      export default{        
          data(){
              return{
                  slides:[
                      { src:'src/assets/slide1.jpg' },
                      { src:'src/assets/slide2.jpg' },
                      { src:'src/assets/slide3.jpg' },
                      { src:'src/assets/slide4.jpg' },
                      { src:'src/assets/slide5.jpg' }
                  ]
              }            
          },
  
          components: {
              Slide
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .slides {
      align-items: center;
      background-color: #666;
      color: #999;
      display: flex;
      font-size: 1.5rem;
      justify-content: center;
      min-height: 10rem;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>and here's the code for the individual image slides:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="slide"&gt;  
          {{slide.src}}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {         
          data(){
              return{}            
          },
          props: {
              slide: ['slide']
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>The v-bind on the v-for loop on the parent Image Carousel component is supposed to bind the slide.src property to the current slide being looped so that it will display the image in the browser but what I'm getting is a blank browser screen and an error that says the right value of the operator at v-bind is not an object although the tutorial I'm following works exactly as it should with this same code so I'm wondering what I'm doing wrong. </p>