将 scss 变量与 Vue.js 中的附加道具绑定

Question

我似乎无法找到我正在寻找的东西。我遇到了一个问题，我希望将道具绑定到自定义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);"

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

Answer 1

几件事。

1. 您不能将 SASS（又名 SCSS）变量绑定到组件，因为 SASS 变量是在编译时而不是运行时解析的。但是，您可以绑定一个 CSS 变量（又名自定义属性），根据变量名称，这是您实际想要的。

2. 使用 CSS 变量的语法与您所展示的略有不同。我怀疑你想要的是

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

然后定义backgroundImage为计算属性。

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

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

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