如何在 vue js 中访问组件样式数组？

Question

I want to set a button's min-width to a specific value which would be it's width after being rendered to the HTML DOM; so that when the button is clicked and a spinner appears at center, it's width remains constant.

In VanillaJS we can access like element.style.minWidth , but how to do so in VueJS component without using $refs while using component?

My Vue Component

Vue.component('submit-btn', {
    template: `
        <button v-on="clickListeners" class="btn btn-sm btn-primary font-blinker text-center" :style="styling">
            <span v-if="loading">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            </span>
            <span v-else>{{title}}</span>
        </button>
    `,
    data: function () {
        return {
            minWidth: '' 
        }
    },
    props: ['title', 'loading'],
    computed: {
        clickListeners: function () {
            var vm = this
              return Object.assign({},
                this.$listeners,
                {
                    click: function (event) {
                        vm.$emit('click', event)
                    }
                }
            )
        },
        styling: function () {
            return {
                minWidth: this.minWidth
            }
        }
    },
    created() {
        this.minWidth = this.$em.style.minWidth // Want to access width here and then set styling.
    }
})

Answer 1

A Vue 2.0 specific way would be done using vue's ref directive.

Check out this JSFiddle example: https://jsfiddle.net/zt4j5o2f/

All you need to do is add the ref="mybutton" attribute to the button, and then you should be able to access it using this.$refs.mybutton