为什么我的 Vue 组件没有绑定样式？答案

【问题标题】：Why doesn't binding style my Vue component?为什么我的 Vue 组件没有绑定样式？
【发布时间】：2020-08-05 04:41:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript css vue.js vuejs2 vue-component

【解决方案1】：

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

您可以直接访问数据，就像您在此处所做的那样：

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

如果你真的想通过实例访问它，你可以通过$data：

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

绑定周围不应有花括号{ }。

【讨论】：