[Vuejs]-Vue.js/React/JSX: How to style a tag using a variable in data?

by

3👍

✅

You have to bind the style attribute to Vue, because you can’t use moustaches on tag properties:

<textarea id="textareaID" :style="resetWidth" />

Because you are using runtime only Vue version, you should try with another approach.

Remove the moustaches from the textarea:

<textarea id="textareaID" />

Set the styles for the element with javascript on the mounted hook or another lifecycle hook that you want:

myFunction: function(event) {
    var textarea = new Vue({
        el: '#textareaID',
        data: {
            resetWidth: 'width: 10px'
        },
        mounted: function () {
            this.$el.setAttribute("style", this.resetWidth);
        },
    })
    //some code that does something
};
👤Gerard Reches

Leave a comment