Как заставить CSS Модули работать в привязке класса Vue? - PullRequest
Новая
       3

Как заставить CSS Модули работать в привязке класса Vue?

0 голосов
/ 13 апреля 2020

Google уже не может мне помочь.

У меня есть шаблон в Vue, например: 

<template>
    <button
        :class="{ 'button-selected': isSelected }">
    </button>
</template>

Все прекрасно работает, пока я не попытаюсь использовать CSS Модули: 

<template>
    <button
        :class="{ styles['button-selected']: isSelected }">
    </button>
</template>

...

import styles from "./Button.scss"

...

data () {
    return {
        styles
    }
}

Конечно. Я не могу его использовать, поскольку 

let obj = { style['button-selected']: this.isSelected }

также являются недопустимым выражением.

Я нашел временное решение: 

<template>
    <button
        :class="classes">
    </button>
</template>
...
computed: {
    classes () {
        let obj = {}
        obj[this.styles['button-selected']] = this.isSelected
        return obj
    }
}

Но так как я использую этот шаблон, мне нужно создать вычисленную опору для каждого элемента.
Я пытаюсь найти другой способ сделать это.

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 13 апреля 2020

Вы можете использовать es6 вычисляемое свойство имена: 

<button :class="{ [styles['button-selected']]: isSelected }">

Внешние скобки вокруг styles['button-selected'] оценивают это выражение как имя свойства. 

new Vue({
  el: "#app",
  data() {
    return {
      isSelected: true,
      styles: {
        'button-selected': 'redclass'
      }
    }
  }
});
.redclass {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button :class="{ [styles['button-selected']]: isSelected }">
  asdf
  </button>
</div>

Вы также можете использовать троичный: 

<button :class="isSelected ? styles['button-selected'] : ''">
...