[Vuejs]-How do I pass object correctly to my vue component?

by

3👍

✅

A few things:

  • The template only has access to the props listed, not stuff from the parent scope which is why index is not available
  • You would bind :person="value" since that is the variable that is populated with the current iterated item of persons
  • Add another prop, ‘role’, so that you can bind the key of the person Object to it

See below:

Vue.component('greeting', {
  template: "<h1>{{person}} is a {{role}}</h1>",
  props: ['person', 'role']
});

var vm = new Vue({
  el: '#app',
  data: {
    persons: {
      'Mike': 'Software Developer',
      'Nikita': 'Administrator Assistant'
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <greeting :person="value" :role="key" v-for="(value, key, index) in persons" :key="index"></greeting>
</div>
👤zero298

Leave a comment