CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vue-component
garam hyeon
garam hyeon

Reputation: 139

Why doesn't binding style my Vue component?

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?

Upvotes: 1

Views: 53

Answers (1)

Dan
Dan

Reputation: 63129

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.

Upvotes: 1

Related Questions