change the style of element dynamically using VUEJS

Question

I have div and I want to change its position dynamically using VueJS app. I have variable x in data function and I want to assign it to top. this is the code I write but it dosn't work in template tag:

<template>
    <div id="squar" v-if="showSquar" :style="{top: x}" @click="countClicks">
        click here
    </div>  
</template>

and in style tag:

#squar{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background: rgb(0,70,40,0.8);
    color: white;
    text-align: center;
    vertical-align: middle;
    line-height: 100px; 
    position: absolute; 
    
    }

the component that I work in isn't the App component

change :style="{top: x}" to :style="`top: ${x}`" you may also need to include !important — Marcello B.
– Marcello B., Commented Aug 2, 2021 at 15:46

Salvino D'sa · Accepted Answer · 2021-08-02 17:24:36Z

1

This works for me:

<template>
  <div id="squar" v-if="showSquar" :style="{ top: top + 'px' }">
    click here
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSquar: true,
      top: 200
    };
  }
};
</script>
<style scoped>
#squar {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: rgb(0, 70, 40, 0.8);
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  position: absolute;
}
</style>

answered Aug 2, 2021 at 17:24

Salvino D'sa

4,5761 gold badge14 silver badges26 bronze badges

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

Comments

Marcello B. · Accepted Answer · 2021-08-02 16:59:46Z

0

Right now you are binding a style attribute that won't do anything you need to write it like css

<template>
    <div id="squar" v-if="showSquar" :style="`top:${x}`" @click="countClicks">
        click here
    </div>  
</template>

You may also need to include the !important tag.

:style="`top:${x}!important`"

answered Aug 2, 2021 at 16:59

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

Collectives™ on Stack Overflow

change the style of element dynamically using VUEJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related