Why doesn't binding style my Vue component?

Question

const EventLevelBoard = {
  name: "EventLevel",
  data: {
    levelStyle: {
      display: "block"
    },
    levelStyleinner: [
      { display: "block" },
      { display: "block" },
      { display: "block" }
    ]
  },
  template: `<ul class="eventlevel" v-bind:style="{data.levelStyle}">
    <li v-for="(item, idx) in eventlist" v-key="idx"  v-bind:style="levelStyleinner[idx]"><strong class="name">{{item.name}}</strong>
    <strong class="size">{{item.size}}</strong></li>
  </ul>`,
  props: {
    eventlist: {
      type: Array
    }
  }
};

Develop Console Error:

data.levelStyle is undefined

data.levelStyleinneris undefined

Why doesn't it find those data properties?

Dan · Accepted Answer · 2020-04-22 16:17:25Z

1

Because data is not an available property on the component instance, even though it is obviously defined in the options.

You can just access the data directly, like you did here:

v-bind:style="levelStyleinner[idx]"

If you really want to access it through the instance, you could do so through $data:

v-bind:style="$data.levelStyle"

There should be no curly braces { } around the binding.

edited Apr 22, 2020 at 16:17

answered Apr 22, 2020 at 8:48

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why doesn't binding style my Vue component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related