How do I update props on a manually mounted vue component?

9
votes

Question: Is there any way to update the props of a manually mounted vue component/instance that is created like this? I'm passing in an object called item as the component's data prop.

let ComponentClass = Vue.extend(MyComponent);

let instance = new ComponentClass({
    propsData: { data: item }
});

// mount it
instance.$mount();

Why

I have a non vue 3rd party library that renders content on a timeline (vis.js). Because the rest of my app is written in vue I'm attempting to use vue components for the content on the timeline itself.

I've managed to render components on the timeline by creating and mounting them manually in vis.js's template function like so.

template: function(item, element, data) {

    // create a class from the component that was passed in with the item
    let ComponentClass = Vue.extend(item.component);

    // create a new vue instance from that component and pass the item in as a prop
    let instance = new ComponentClass({
        propsData: { data: item },
        parent: vm
    });

    // mount it
    instance.$mount();

    return instance.$el;
}

item.component is a vue component that accepts a data prop.

I am able to create and mount the vue component this way, however when item changes I need to update the data prop on the component.

3
vue.jsvis.js
I suspect you're going to need to write a render function for the parent that causes your dynamic new component to display. That is how you properly hook up props. propsData is unchangeable and intended for testing creation. – Roy J
@RoyJ so there is no way to add dynamic props to a manually mounted instance? Even using something different than propsData? I don't have the option of mounting this component in a render function because its being passed into a 3rd party library (that is not vue). – Craig Harshbarger
If item is an object whose members' values are changing, you could set the data function to return item and probably get what you want. – Roy J
@RoyJ Can you provide an example? – Craig Harshbarger

3 Answers

2
votes

If you define an object outside of Vue and then use it in the data for a Vue instance, it will be made reactive. In the example below, I use dataObj that way. Although I follow the convention of using a data function, it returns a pre-defined object (and would work exactly the same way if I'd used data: dataObj).

After I mount the instance, I update dataObj.data, and you can see that the component updates to reflect the new value.

const ComponentClass = Vue.extend({
  template: '<div>Hi {{data}}</div>'
});

const dataObj = {
  data: 'something'
}

let instance = new ComponentClass({
  data() {
    return dataObj;
  }
});

// mount it
instance.$mount();
document.getElementById('target').appendChild(instance.$el);

setTimeout(() => {
  dataObj.data = 'another thing';
}, 1500);
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="target">
</div>
0
votes

Here's how I'm able to pass and update props programmatically:

const ComponentClass = Vue.extend({
  template: '<div>Hi {{data}}</div>',
  props: {
    data: String
  }
});

const propsObj = {
  data: 'something'
}

const instance = new ComponentClass()

const props = Vue.observable({
      ...instance._props,
      ...propsObj
})

instance._props = props

// mount it
instance.$mount();
document.getElementById('target').appendChild(instance.$el);

setTimeout(() => {
  props.data = 'another thing';  // or instance.data = ...
}, 1500);
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="target">
</div>
0
votes

In Vue 2.2+, you can use $props. In fact, I have the exact same use case as yours, with a Vue project, vis-timeline, and items with manually mounted components.

In my case, assigning something to $props.data triggers watchers and the whole reactivity machine.

EDIT: And, as I should have noticed earlier, it is NOT what you should do. There is an error log in the console, telling that prop shouldn't be mutated directly like this. So, I'll try to find another solution.