title: Vue.js: How to access property value of objects in loop in a child component
body: <p>I'm working on a Vue app in which my initial view (projects.vue) renders an array of objects (using v-for loop), in summary form; each object's summary has button links to a 'detail' view &amp; and 'edit' view; the links use an object property (id) to select/render the corresponding detail view, and this is working fine. Now, since these links will occur in several other views, I made a buttons.vue component and import it in projects.vue, but this way they're not getting the ID, and as a newb despite some reading about components and props I haven't figured how to achieve this seemingly simple function. My components:</p>
  
  <p>projects.vue (this works; note the use of 'project.id'):</p>
  
  <pre><code>&lt;template&gt;
      &lt;ol class="projects"&gt;
          &lt;li class="project" v-for="(project, ix) in projects"&gt;
              &lt;!— SNIP: some html showing the project summary  —&gt;
              &lt;!--
                  my objective is to replace the following with
                  &lt;app-buttons&gt;&lt;/app-buttons&gt;
              --&gt;
              &lt;div class="buttons"&gt;
                  &lt;router-link class="button" v-bind:to="'/project-detail/' + project.id"&gt;details&lt;/router-link&gt;
                  &lt;router-link class="button" v-bind:to="'/project-edit/' + project.id"&gt;edit&lt;/router-link&gt;
              &lt;/div&gt;&lt;!-- END .buttons --&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
      export default {
          components: {
              'app-buttons': Buttons
          },
          data () {
              return {
                  projects: [],
                  search: "",
                  projectID: ""
              }
          }, // data
          methods: {
          }, // methods
          created: function() {
              this.$http.get('https://xyz.firebaseio.com/projects.json')
              .then(function(data){
                  return data.json();
              }).then(function(data){
                  var projectsArray = [];
                  for (let key in data) {
                      data[key].id = key; // add key to each object
                      this.projectID = key;
                      projectsArray.push(data[key]);
                  }
                  this.projects = projectsArray;
              })
          }, // created
          computed: {
          }, // computed
      } // export default
  &lt;/script&gt;
  </code></pre>
  
  <p>buttons.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="buttons"&gt;
  
          &lt;router-link class="button" v-bind:to="'/project-detail/' + projectID"&gt;details&lt;/router-link&gt;
          &lt;router-link class="button" v-bind:to="'/project-edit/' + projectID"&gt;edit&lt;/router-link&gt;
  
      &lt;/div&gt;&lt;!-- END .buttons --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
     export default {
          props: [ "projectID" ],
        data() {
           return {
           }
          },
          methods: {}
     }
  &lt;/script&gt;
  </code></pre>