vue.jsrepaint

Attach component to multiple keys


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?


Solution

  • 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
      }
    }