Связывание переменных 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 также правильно указывает на опечаткув вашем коде в комментариях.