CODEWITHSUNDEEP
vue.jsvuejs2
phpmeh
phpmeh

Reputation: 1792

Passing data with props defined in grandparent to grandchild

Parent class:

<template>
  <BaseButton icon="activity">Slotted Text</BaseButton>
</template>

Child class: BaseButton

<template>
  <div>
     {{ icon }} // returns the expected result; prop is coming in.
     <slot>Default Text</slot> 
     <BaseIcon :name="{{icon}}" /> <-- error is here, see below. 
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true,
    },
  },
}

Grandchild:

<template>
  <div class="icon-wrapper" v-html="svg"></div>
</template>

<script>
export default {
  props: {
    name: String
  }
  // code that uses the name prop
}
</script>

The error is:

Unexpected token '{' in

    {{icon}}

Is there a way to pass the expression into the prop?

Upvotes: 0

Views: 33

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should use the binding v-bind:name="icon" to bind the attribute with the property :

  <BaseIcon v-bind:name="icon" />

or the shorthand :

  <BaseIcon :name="icon" />

Upvotes: 1

Related Questions