styled-components / vue-styled-components

Visual primitives for the component age. A simple port for Vue of styled-components 💅
MIT License
1.38k stars 99 forks source link

Vuex HTML Input Value Field Jitter #74

Open WoofMeowEtc opened 5 years ago

WoofMeowEtc commented 5 years ago

Hey. Thanks again for the awesome work here. I noticed that when I do:

<script>
    import styled from 'vue-styled-components';

    var MyInput = styled.input``;

    export default {
        components: {
            MyInput
        }
    }
</script>

<template>
    <MyInput
        type="range"
        min="0"
        max="100"
        defaultValue="0"
        :value="$store.state.brightness"
        @input="$store.commit('setBrightness', $event.target.value)"
    />
</template>

The HTML slider loses its mind and jitters all over the place. It seems to be trying to snap to 0, 50, or 100. Very odd, but when I change MyInput to input the problem is solved, so I think this has to do with some interaction between vue-styled-components and vuex. Thoughts?

liqueflies commented 5 years ago

Can you link me a code sandbox with an example?