Giters

unplugin / unplugin-vue2-script-setup

💡 Bring `<script setup>` to Vue 2.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error on bound SVG attributes

jaredmcateer opened this issue · comments

commented

It seems that there is a problem detecting that Ref<string> is compatible with the Numbish type in the @vue/runtime-dom.

image

Minimal test case:

<script setup lang="ts">
import { ref } from "@vue/composition-api";
// `Numberish` in @vue/runtime-dom is `string | number` so these should work
const width = ref("100%");
const height = ref(100);
</script>

<template>
  <svg :width="width" :height="height"></svg>
</template>

Error produced:

Type 'Ref<string>' is not assignable to type 'Numberish'.ts(2322)
runtime-dom.d.ts(917, 3): The expected type comes from property 'width' which is declared here on type 'ElementAttrs<SVGAttributes>'

Using the defineComponent method there is no error:

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const width = ref("100%");
    const height = ref(100);
    return { width, height };
  },
});
</script>

<template>
  <svg :width="width" :height="height"></svg>
</template>
commented

Yes that resolves the issue, thanks. I hadn't looked at that example as we're not using vue-cli, just a home rolled webpack config.