how to use data object into a style tag? vuejs

Question

So i am trying to create a parallax effect by targeting background-position with a data object.

<div class="parallaxBanner" :style="{scrollBanner}">
</div>

<script>
    export default {
        data: function(){
            return{
                scrollBanner: 0,
            }
        },
        methods:{
            scrollPosition: function(){
                this.scrollbanner = window.scrollY % 0.5;
                console.log(window.scrollY);
            }
        },
        mounted() {
          window.addEventListener('scroll', this.scrollPosition);
        }
    }
</script>

not 100% how to target css in line value any suggestions would be a big help :)

you can also assign any computed method directly which will return an object of style attributes. — Sanjaysinh Zala
– Sanjaysinh Zala, Commented Dec 24, 2018 at 4:38
Possible duplicate of Style an item in a list based on its property in Vuejs — Brian Lee
– Brian Lee, Commented Jan 1, 2019 at 10:41

Ru Chern Chong · Accepted Answer · 2018-12-24 00:31:30Z

1

If you want to set background-position, you can use

<div class="parallaxBanner" :style="{ backgroundPosition: scrollBanner }">
</div>

edited Dec 24, 2018 at 0:31

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

answered Dec 23, 2018 at 1:52

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

Comments

Sanjaysinh Zala · Accepted Answer · 2018-12-24 04:36:46Z

0

You can directly assign method in style and write one method in computed:

HTML

<Row>
  <i-col :span="5" :style="styles" class="sidebar">
    <f-sidebar></f-sidebar>
  </i-col>
</Row>

SCRIPT

computed: {
  styles () {
    return {
      style.position = 'fixed'
      style['z-index'] = '99'
      style.height = '100%'
      style.background = '#363e4f'
    }
  }
}

answered Dec 24, 2018 at 4:36

Sanjaysinh Zala

1342 silver badges12 bronze badges

Collectives™ on Stack Overflow

how to use data object into a style tag? vuejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related