在 vue.js（和 webpack）中结合 v-bind 和 v-for 忽略 v-bind

Question

我想将内联样式绑定到包含 v-for 的 div。但它似乎总是忽略 v-bind。这是模板和数据。

<template>
    <div id="app">
      <div v-bind:style="styleObject" v-for="collection in collections" :key="collection.id">       
       <a v-bind:href="collection.pageurl">  
         <h1>{{ collection.title }}</h1>
         <h2>{{ collection.author }}</h2>             
      </a>   
    </div>
    <router-view/>
    </div>
    </template>

...这是同一个 .vue 文件中的脚本代码：

export default {
  name: "app",
  styleObject: {
    background: "red",
    borderColor: "red"
  },
  //Pass data to the app.
  firebase: {
    collections: collectionsRef
  }
};

背景图片将来自表格，但我什至无法让这个简单的静态示例工作。除了 v-bind 被忽略之外，一切都按预期呈现。当我在 chrome 中检查时，style= 甚至不在 div 标签中。我从 vue.js 文档中复制了 v-bind 代码。我正在使用带有 webpack 的 vue-cli。

没有错误信息，代码编译正常。 v-bind 被忽略了。

Answer 1

styleObject 必须是组件数据或计算属性的一部分。我假设 collectionsRef 对您来说工作正常，尽管根据发布的代码它似乎是未定义的。

export default {
  name: "app",
  data(){
    return {
      styleObject: {
        background: "red",
        borderColor: "red"
      }, 
    }
  },
  //Pass data to the app.
  firebase: {
    collections: collectionsRef
  }
};

Answer 2

让你的代码像这样。

data : return{
   styleObject: {
    background: "red",
    borderColor: "red"
  }
}