[Vuejs]-Vue :to from a properties

by

1👍

✅

whatever in v-bind should be a valid Javascript expression

in this case, it should just be a valid Javascript Object

:to="{name: item.componentName}"

👤Jacob Goh

1👍

Your problem is that you’re attempting variable interpolation (the {{item.componentName}} part) within a v-bind expression. This isn’t supported.

Instead, you can use any valid JavaScript expression and it will automatically detect component-level data scoping (even in a v-for loop!). For instance, your desired expression should be this:

:to="{name: item.componentName}"

As noted with v-for, the following toy example would also be valid:

<div v-for="(item, item_index) in itemsArray">
    <my-component :myProp="{name: item.componentName, position: item_index}"></my-component>
</div>

Interpolation is only necessary if you’re attempting to render some value outside of a v-binding, e.g. displaying some text:

<div>{{item.componentName}}</div>
👤B. Fleming

Leave a comment