A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/vuejs/vue-next/issues/3688 below:

Style-vars-2 v-bind feature doesn't work with Composition API · Issue #3688 · vuejs/core · GitHub

Version

3.0.11

Reproduction link

https://codesandbox.io/s/epvsl

Steps to reproduce

With the following template:

<template>
  <div class="bloc">{{ size }} {{ color }}</div>
</template>

<script>
  // Component script
</script>

<style scoped>
.bloc {
  width: v-bind(size);
  height: v-bind(size);
  background-color: v-bind(color);
}
</style>

1 - Create a component using dynamic CSS style based on the Options API.

export default {
  data: () => {
    return {
      size: "100px",
      color: "green"
    }
  }
}

2 - Create a component using dynamic CSS style based on the Composition API.

export default {
  setup() {
    const
      size = "100px",
      color = "red"

    return {
      size,
      color
    }
  }
}
What is expected?

CSS v-bind feature should work using both Options and Composition API.

What is actually happening?

CSS v-bind feature doesn't work with the Composition API.
The following error is printed:

Uncaught (in promise) ReferenceError: _unref is not defined
    __injectCSSVars__
    setVars

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4