Dynamic style with Vue.js

Question

I want to to add and remove the style pointer-events:none; attribute dynamically with Vue.js:

new Vue({
  el: '#el',
  data: {
    toggled: false
  },
  methods: {
    toggle: function () {
      this.toggled = !this.toggled;
    },
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="el">
  <!-- The style disables all mouse events in the div -->
  <div style="pointer-events:none;">
    ...
  </div>
  <button v-on:click="toggle">Toggle click</button>
</div>

How should I do this?

joaner · Accepted Answer · 2018-06-22 10:13:38Z

5

new Vue({
  el: '#el',
    data: {
       toggled: false
    },
    methods: {
      toggle: function () {
        this.toggled = !this.toggled;
      },
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="el">
  <!-- The style disables all mouse events in the div -->
  <div :style="{ 'pointer-events': toggled ? 'none' : null }">
    ...
  </div>
  <button v-on:click="toggle">Toggle click</button>
</div>

Your <button> is outside the #el, causing it not to be parsed by the Vue.

answered Jun 22, 2018 at 10:13

joaner

7161 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JacopoStanchi Over a year ago

Oh right, I forgot the button, but that's merely for the example, my code is not like that.

joaner Over a year ago

@JacopoStanchi okay, the answer is :style attribute, see vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

zizzo · Accepted Answer · 2018-06-22 10:14:06Z

2

To dynamically change style on an HTML component, you can assign or remove a class to a given component based on a data value, for example:

<template>
   <div @click="toggleData=!toggleData">Click to toggle</div>
   <div :class="[toggleData ? 'classA' : 'classB']"></div>
</template>

<script>
export default {
  data() {
    return {
      toggleData: false,
    };
  },
</script>

<style>
.classA{
  pointer-events:none;
}
.classB{
    pointer-events:auto;
}
</style>

answered Jun 22, 2018 at 10:14

zizzo

5145 silver badges14 bronze badges

1 Comment

JacopoStanchi Over a year ago

That's a really good answer, but I'd rather not use classes for such a simple operation.

santanu bera · Accepted Answer · 2018-06-22 10:40:54Z

You can use computed property that returns an object, where key represents the property and value represents the css property value. Here is the example of using computed property -

<div id="el">
  <!-- The style disables all mouse events in the div -->
  <div v-bind:style="dynamicStyleObject">
  ...
  </div>
  <button v-on:click="toggle">Toggle click</button>
</div>


computed:{
    dynamicStyleObject:function(){
       // Conditionally return object in the following format -
       return {
          'pointer-events' : 'none',
          'some-other-property' : 'some-value'
       };
    }
}

Using computed property is much convenient because, whenever the data of the component changes, the dynamicStyleObject changes automatically and accordingly.

Mohammad Ayoub Khan · Accepted Answer · 2019-09-30 19:14:08Z

0

I think you are looking for something like this

<template>
  <div>
      <h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script> 
export default {
  data(){
   return {
   condition:false,
   activeColor: 'white',
   fontSize: 12
          }
         }
   }
</script>

answered Sep 30, 2019 at 19:14

Mohammad Ayoub Khan

3,01022 silver badges26 bronze badges

Collectives™ on Stack Overflow

Dynamic style with Vue.js

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related