无法使用计算属性或方法将动态样式应用于元素

Question

尝试在动态样式中使用扩展运算符（在这个简化的示例中没有用，但在我使用多个样式对象的真实案例中很重要）。另外我需要使用一个带有参数的方法，但它不起作用。事实上，即使使用计算属性它也不起作用。

我做错了什么？

标记：

<div id="app">
  <div class="item" :style="{ ...styleComputed }">
    item
  </div>
  
  <div class="item" :style="{ ...styleMethod('red') }">
    item
  </div>
</div>

脚本：

new Vue({
  el: "#app",
  computed: {
        styleComputed: function(){
        return { 'background-color': 'red' };
    }
  },
  methods: {
    styleMethod: function(val){
        return { 'background-color': val };
    }
  }
})

Answer 1

我猜解构破坏了反应性？

您应该使用数组绑定来将多个对象绑定到 class / style:

<div
  :style="[styledComputed, { opacity: 1 }]"
  :class="['static-class', { active: isActive }, myComputedClasses]"
>
</div>

Answer 2

正如您从代码片段中看到的那样，您只是忘记引用 vue：

new Vue({
  el: "#app",
  computed: {
    styleComputed() {
      return { 'background-color': 'red' };
    }
  },
  methods: {
    styleMethod(val) {
      return { 'background-color': val };
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <div class="item" :style="{ ...styleComputed }">
    item
  </div>
  
  <div class="item" :style="{ ...styleMethod('blue') }">
    item2
  </div>
</div>

无法使用计算属性或方法将动态样式应用于元素

Can't apply dynamic styles to element using computed property or method

styles

spread

vue.js

无法使用计算 属性 或方法将动态样式应用于元素

Can't apply dynamic styles to element using computed property or method

styles

spread

vue.js

无法使用计算属性或方法将动态样式应用于元素