I have a component that has two attributes that need it to be repainted/rebuild, as the component is not reactive (it is a wrapped jQuery component).
<component :template="template" :submit="submit" :data="data"></component>
As I found out the :key
is the right thing to use (How can I reload a vue component?, https://michaelnthiessen.com/force-re-render/).
But since I have two properties to watch I don't know how to do that.
Two keys result in the error duplicate attribute: :key
<component :key="data" :key="selected_form" :template="template" :submit="submit" :data="data"></component>
And putting them in an array results in the warning Avoid using non-primitive value as key, use string/number value instead.
<component :key="[data, selected_form]" :template="template" :submit="submit" :data="data"></component>
What is the correct/best way of repainting a component if either of the models changes?
You could use a method that returns some string based on data
and selected_form
..
<component :key="getKey(data, selected_form)" :template="template" :submit="submit" :data="data"></component>
And in your methods ..
methods: {
getKey(data, selected_form) {
// return some string based on data and selected_form
}
}