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 = isn甚至不在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"
  }
}

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

2 个答案: