title: Referring to properties passes as props in Vue.js components
body: <p>I've started working on a board game prototype and decided to go with Vue.js. I have some experience with JavaScript and everything was going fine ... until I tried to access a property passed with 'props' in a component.</p>
  <p>Here's the whole code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Board&lt;/title&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
    
    &lt;style type=&quot;text/css&quot;&gt;
      #board {
        width: 600px;
      }
      .square { width: 100px; height: 100px; margin: 1px; border: 1px solid grey; display: inline-block; float: left; }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id=&quot;board&quot;&gt;
      
      &lt;square v-for=&quot;square in squares&quot;&gt;&lt;/square&gt;
      
    &lt;/div&gt;
    
    &lt;script&gt;
      var app = new Vue({
        el: '#board',
        data: {
          squares: []
        }
      })
      
      const rows = 5
      const cols = 5
      const reservedLocation = { row: 2, col: 2 }
      
      Vue.component('square', {
        props: [
          'row',
          'col',
          'type',
        ],
        template: '&lt;div class=&quot;square&quot; v-on:click=&quot;logLocation&quot;&gt;&lt;/div&gt;',
        methods: {
          logLocation: function() {
            console.log(this)
            console.log(&quot;Location: &quot; + this.col + &quot;x&quot; + this.row )
          },
        },
      })
      
      for (var row=0; row&lt;rows; row++) {
        for (var col=0; col&lt;cols; col++) {
          const type = (row == reservedLocation.row &amp;&amp; col == reservedLocation.col) ? 'reserved' : 'empty'
          app.squares.push({ row: row, col: col, type: type })
        }
      }
      
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>What's happening there is the &quot;board&quot; div is filled with the &quot;square&quot; components. Each square component has the 'row', 'col' and 'type' properties, passed to it as 'props'. When the user click on a square, the 'logLocation' function of the corresponding component is called and all that function does is, it logs the 'row' and 'col' properties.</p>
  <p>Everything works fine except the message logged is: &quot;Location: undefinedxundefined&quot;, in other words, both this.col and this.row seems to be undefined. I've checked 'this', and it seems to be the correct component.</p>
  <p>I'm sure it's something obvious but I couldn't find an answer in either the official documentation, in tutorials or even here, on Stack Overflow itself – perhaps I'm not using the correct terms.</p>
  <p>A bit of new info: the 'row' and 'col' properties are set on the component object and in the '$props' property but the value they return in 'undefined'. Am I, somehow, passing the parameters incorrectly?</p>
  <hr />
  <h2>Solution</h2>
  <p>Turns out, there is a section in the Vue.js documentation dedicated specifically to using 'v-for' with components: <a href="https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component" rel="nofollow noreferrer">&quot;v-for with a Component&quot;</a> and here's the relevant portion of the code:</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;div id=&quot;board&quot;&gt;
      
      &lt;square
        v-for=&quot;square in squares&quot;
        :key=&quot;square.id&quot;
        :row=&quot;square.row&quot;
        :col=&quot;square.col&quot;
        :type=&quot;square.type&quot;
      &gt;&lt;/square&gt;
      
    &lt;/div&gt;
  </code></pre>
  <p>Huge thanks to Stephen Thomas for pointing me in the right direction!</p>