在 Vue.js 中使用附加的 prop 绑定 scss 变量答案

【问题标题】：Binding scss variables with an attached prop in Vue.js在 Vue.js 中使用附加的 prop 绑定 scss 变量
【发布时间】：2019-03-13 10:20:44
【问题描述】：

我似乎无法找到我正在寻找的东西。我遇到了一个问题，我希望将道具绑定到自定义 scss 变量。

我有以下“卡片”component：

<template>
  <div class="option" v-bind:style="--optionBackground:url(img);" v-on:click="switchCards">
    <div class="shadow"></div>
    <div class="label">
      <div class="icon">
         <i class="fas fa-walking"></i>
      </div>
      <div class="info">
         <div class="main">Blonkisoaz</div>
         <div class="sub">Omuke trughte a otufta</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    img: String
  },
  methods: {
    switchCards () {
       console.log('clicked')
    }
  }
};
</script>

忽略一些占位符脚本。

所以，我正在尝试v-bind:style="--optionBackground:url(img);"，其中 img 作为来自父级 component 的道具传入如下：

<template>
  <div id="app">
    <div v-for="card) in cards" class="options" v-bind:key="card.id">
      <Card v-bind:img="card.img"/>
    </div>
  </div>
</template>

<script>
import Card from "./components/Card.vue";

export default {
  name: "app",
  components: {
    Card
  },
  data () {
    return {
      cards: [
        { id: 1, img: 'https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg'},
        { id: 2, img: 'https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg'},
        { id: 3, img: 'https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg'},
        { id: 4, img: 'https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg'}
      ]
    }
  }
};
</script>

但是，我收到以下错误：

invalid expression: Unexpected token : in

  --optionBackground:url(img);

Raw expression: v-bind:style="--optionBackground:url(img);"

我已尝试查看尽可能多的用例，但我真的不确定该去哪里...任何帮助将不胜感激！ :)

【问题讨论】：

card) in cards 打错字了？请删除) 并重试

标签： vue.js sass

【解决方案1】：

几件事。

您不能将 SASS（又名 SCSS）变量绑定到组件，因为 SASS 变量是在编译时而非运行时解析的。但是，您可以绑定一个 CSS 变量（也称为自定义属性），这就是您根据变量名称实际想要的。
使用 CSS 变量的语法与您所展示的略有不同。我怀疑你想要的是

<div class="option" v-bind:style="{'--optionBackground': backgroundImage}">

然后将backgroundImage 定义为计算属性。

computed: {
  backgroundImage() { return "url(" + this.img + ")"; }
}

（您可以使用模板文字使代码更简洁，但看起来堆栈溢出并不能很好地处理答案。）

编辑添加：@boussadjira 还正确指出了您在 cmets 中的代码中的错字。

【讨论】：