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.levelStyleinner未定义

为什么找不到那些数据属性？

Answer 1

因为data在组件实例上不是可用的属性，即使它显然是在选项中定义的。

您可以像在此处一样直接访问数据：

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

如果您确实要通过实例访问它，则可以通过$data进行访问：

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

在绑定周围应该没有大括号{ }。

为什么不绑定样式Vue组件？

1 个答案: