為什么我的 Vue 組件沒有綁定樣式？

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

開發控制台錯誤：

data.levelStyle 未定義

data.levelStyleinneris 未定義

為什么它找不到那些數據屬性？

Answer 1

因為data不是組件實例上的可用屬性，即使它顯然是在options中定義的。

您可以直接訪問數據，就像您在此處所做的那樣：

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

如果你真的想通過實例訪問它，你可以通過$data來實現：

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

綁定周圍不應有花括號{ } 。