Help us understand the problem. What is going on with this article?

Vue で script で算出した数値・文字列を CSS で利用したい

後で修正します。ポイントは CSS変数をDOMに動的に当てる ところです。
ここに気づけずけっこうハマりました。。。

<template>
  <div class="test" :style="styles">
    <input v-model="color" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      color: 'black',
    };
  },
  computed: {
    styles() {
      return {
        '--color': this.color,
      };
    },
  },
});
</script>

<style lang="scss" scoped>
$size: 10px;

.test {
  --color: black;  // ここは必ず指定
  color: var(--color);
  font-size: $font-size; // もちろん SCSS の変数とも併用できます。
}
</style>

Options API だけでなく、 Class API でも動作します。もちろん、 Nuxt でも OK です。
安全性のために、 以下の2点は必ず実施してください。

  • デフォルト値の設定(万が一 computed が壊れた等して値が飛んでこなかったら事故に繋がります)
  • SASS系なら対象のスコープを限りなく狭めて使う(想定外の影響を避けてください)
akagire
最近はNuxt.jsとFirebaseでサーバーレス開発をやってます。
http://akagire.hatenablog.com/
persol
PERSOL(パーソル)グループは、人材派遣、人材紹介、求人広告をはじめとし、ITアウトソーシング、設計開発にいたるまで、国内外70社を超える幅広い企業群で構成されています。
https://www.persol-group.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away