Inject Vue component with computed properties into another component programmatically

Question

I'm building a list of things which have a counter associated to them, like in the following image:

I'm struggling on how I can inject the right part of each row, which is in a separate component and handles what happens when you click each button, updating its counter, whenever I click 'Add new'.

How can I inject a component, along with its dependencies and computed properties?

The vue way is to declare child components in the parent template. — Eric Guan
– Eric Guan, Commented May 22, 2017 at 23:30
I don't think you understood the problem. Whenever I click 'add new' I'm picking information from an array, adding it to a new row on the table AND a new instance of my Counter.vue component should be dynamically added on that new row, already bound so that when I click + or - it updates the counter of the row itself. — Anonymous
– Anonymous, Commented May 23, 2017 at 0:33
Right. You can declare all of that with a v-for. You'll have a row component and a counter component within the row. The counter can emit increment/decrement events to the row. — Eric Guan
– Eric Guan, Commented May 23, 2017 at 0:49
Try a second vue that's used as an event dispatcher / listener as detailed here: alligator.io/vuejs/global-event-bus it could be just what you're looking for. — admcfajn
– admcfajn, Commented May 23, 2017 at 1:48
The second vue instance can do things like 'emit' and 'on' - so when component a eventBus.emit('somethingAwesome', {'with':data}) a different component can eventBus.on('somethingAwesome',function(e){this.$set(this,'someVar',e)}); — admcfajn
– admcfajn, Commented May 23, 2017 at 1:53

Anonymous · Accepted Answer · 2017-05-23 01:59:10Z

1

The answer Eric Guan gave me was right. I was complicating something that Vue solves on its own.

My custom component relies on whatever I'm serving within the v-for, so whenever that array changes, the component I have on that row will follow:

    <ul class="extras">
        <li v-for="extra in extras">
            <div>{{ extra.name }} </div>
            <div>{{ extra.price }}</div>

            <calculator :object="extra"></calculator>
        </li>
    </ul>

answered May 23, 2017 at 1:59

Anonymous

8602 gold badges12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Inject Vue component with computed properties into another component programmatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related