Почему не привязывается стиль моего Vue компонента? - PullRequest
Новая
       4

Почему не привязывается стиль моего Vue компонента?

0 голосов
/ 22 апреля 2020 
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
    }
  }
};

Ошибка разработки консоли:

data.levelStyle не определен

data.levelStyleinneris undefined

Почему он не находит эти свойства данных?

1 Ответ

1 голос
/ 22 апреля 2020

Поскольку data не является доступным свойством в экземпляре компонента, даже если оно явно определено в параметрах .

Вы можете просто получить прямой доступ к данным, как и вы здесь: 

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

Если вы действительно хотите получить к нему доступ через экземпляр, вы можете сделать это через $data: 

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

Не должно быть фигурных скобок { } вокруг переплет.

...