[Vuejs]-Understanding components and props

by

0👍

Here is the code for your components. Rather than use v-bind, you just need to use :oppList="opportunityListVals" to pass that array from parent to child. When the parent array updates, the child component will automatically update as well.

You also need to use Vue.extend() to create a child component, not just send in the object.

<body>
<div id="app">
    <opportunitylist :oppList="opportunityListVals"></opportunitylist>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}]
        },
        components: {
            opportunitylist: Vue.extend({
                props: ['oppList'],
                template: '<ul>'
                    + '<li v-for="opp in oppList">'
                    + '{{opp.name}}'
                    + '</li>'
                    + '</ul>'
            })
        }
    });
</script>

I don’t really understand what you were doing with that input and the third value, so you’ll have to clarify that before I can provide input there.

Leave a comment