Home » vue » Vue :to from a properties

Vue :to from a properties

Posted by: admin November 26, 2021 Leave a comment

Questions:

I create my list of views link from a array in my data but it`s possible to bind the :to property to a item in my object? something link this

<v-list-tile v-else @click="" :to="{name: '{{item.componentName}}'}" :key="item.text">
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
Answers:

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

###

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>