CODEWITHSUNDEEP
javascriptvuejs2
Nerea
Nerea

Reputation: 2157

Vue component not binding style

Hi I'm new at Vue so maybe I am missing something obvious. I have a component SliderItem which I want to set top position so I add a property to data:

data () {
    return {
    /*more data*/
     topSliderText: '120px'
    }
}

This is the Vue instance

import { Slider } from 'vue-easy-slider'
var SliderItem = require('./components/easy-slider-item.vue');

new Vue( {
  el: '#slider',
  data () {
    return {
      list: [
        { background: "url('/images/sliders/be.png')", width: '100%', height: '100%' },
      ]
    }
  },
  components: {
    Slider,
    SliderItem
    },
    mounted() {

    }
} );

and then in the view 

<div class="" id="slider">
<slider animation="fade">
  <slider-item v-bind:style="{top: topSliderText}" v-for="(i, index) in list" :key="index">
    <div :style="i">
        <div class="slider-text">
             <p style="font-size: 5rem; text-align: center;">Page @{{ index +1 }}</p>
        </div>

    </div>
  </slider-item>
</slider>

But is not working, the SliderItem has no style, and I get this warn on console

vue-slider.js:561 [Vue warn]: Property or method "topSliderText" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

vue-slider.js:562 [Vue warn]: The computed property "topSliderText" is already defined in data

But when I use Vue chrome extension to see the component, it has the property so... I don't know what I'm doing wrong...

Thanks in advance.

Upvotes: 1

Views: 1151

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You defined the topSliderText in SliderItem component but making use of it in the Parent Component.

That is the reason you get vue [warn] as vue searches for topSliderText in the parent component's properties.

So define topSliderText as a data property in the parent component itself

Upvotes: 1

Related Questions