为啥我的 Vue 组件没有绑定样式？

Posted 2023-02-23

【中文标题】为啥我的 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 未定义

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

【参考方案1】：

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

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

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

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

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

绑定周围不应有花括号 。