Vuejs Multiple Style bindings?

Question

i have a couple of different styling that needs to apply to a text. I am trying to bind the styles using array syntax as shown in the documentation: https://v2.vuejs.org/v2/guide/class-and-style.html but not sure what i'm doing wrong.

I have created a pen for demonstration: https://codepen.io/anon/pen/orVGNP The computed property style is the one i am trying to apply as well which changes the font style and font weight.

    <div id="colorpicker">
     <v-layout justify-center>
       <v-flex class="ml-5">
         <chrome-picker v-model="colors"></chrome-picker>
       </v-flex>
      <v-flex>
        <chrome-picker v-model="colors1"></chrome-picker>
      </v-flex>
    </v-layout>
       <v-container>
          <v-layout justify-center>
              <v-btn-toggle v-model="btnTgl" class="ma-2" multiple>
          <v-btn>
               <v-icon>format_bold</v-icon>
         </v-btn>
          <v-btn>
              <v-icon>format_italic</v-icon>
         </v-btn>
        <v-btn>
            <v-icon>format_underlined</v-icon>
        </v-btn>
        <v-btn>
           <v-icon>maximize</v-icon>
       </v-btn>
      </v-btn-toggle>
      <v-flex xs6 class="ml-5">
       </v-flex>
     </v-layout>
   <div v-bind:style="[{ color: colors.hex, background:colors1.hex, style 
     }]" class="title">
       Random Test Text!!!!!
        </div>
     </v-container>
    </div>


         var Chrome = window.VueColor.Chrome;

         new Vue({
    el: '#colorpicker',
     data: {
      message: 'hello',
      toggle_one: 0,
      colors: {
       "hex": "#000000",
      "source": "hex"
      },
     colors1: {
      "hex": "#ffffff",
    "source": "hex"
     },
      updateValue: '',
     hex: '',
      isOpen: false,
      btnTgl: []
     },
       components: {
      'chrome-picker': Chrome
       },
     computed: {
      style() {
       let style = {};
      if (this.btnTgl.indexOf(0) > -1) {
      style.fontWeight = "bold";
     }
     if (this.btnTgl.indexOf(1) > -1) {
    style.fontStyle = "italic";
     }
  if (this.btnTgl.indexOf(2) > -1) {
    style.textDecoration = "underline";
  }
  if (this.btnTgl.indexOf(3) > -1) {
    style.textDecoration = "line-through";
  }
  return style;
   },
  }
});

Again it's just the computed property that i'm having a hard time trying to include in the v-bind: style. thank you for the help everyone!!

Answer 1

You need to bind the style object differently.

<div :style="appliedStyle" class="title">
    Random Test Text!!!!!
</div>

Javascript:

var Chrome = window.VueColor.Chrome;

new Vue({
el: '#colorpicker',
data: {
    message: 'hello',
    toggle_one: 0,
    colors: {
        "hex": "#000000",
        "source": "hex"
    },
    colors1: {
        "hex": "#ffffff",
        "source": "hex"
    },
    updateValue: '',
    hex: '',
    isOpen: false,
    btnTgl: [],
    appliedStyle: {}
},
components: {
    'chrome-picker': Chrome
},
methods: {
    toggle: function() {
        this.isOpen = !this.isOpen
        this.colors.source = 'hex'
    },
    style() {
        let style = {
            'color': this.colors.hex,
            'background-color': this.colors1.hex,
        }
        if (this.btnTgl.indexOf(0) > -1) {
            style['font-weight'] = "bold";
        }
        if (this.btnTgl.indexOf(1) > -1) {
            style['font-style'] = "italic";
        }
        if (this.btnTgl.indexOf(2) > -1) {
            style['text-decoration'] = "underline";
        }
        if (this.btnTgl.indexOf(3) > -1) {
            style['text-decoration'] = "line-through";
        }

        this.appliedStyle = style;
    },
},
watch: {
    colors: function(val) {
        this.appliedStyle['color'] = val.hex;

    },
    colors1: function(val) {
        this.appliedStyle['background-color'] = val.hex;
    },
    btnTgl: function(val) {
        this.style()
    }
}
});