Vue组件不具约束力风格

嗨，我是Vue的新人，所以也许我错过了一些明显的东西。我有一个部件SliderItem其中我想设置顶部位置，所以我添加属性数据：Vue组件不具约束力风格

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

这是Vue的实例

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() { 

    } 
});

然后在视图

<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>

但是不行，SliderItem没有风格，我得到这个警告在控制台上

VUE-slider.js：561 [Vue公司提醒]：属性或方法“topSliderText”没有在实例中定义，但在引用的渲染。确保在数据选项中声明反应数据属性。

VUE-slider.js：562 [Vue的警告]：所计算的属性“topSliderText”在数据

但是当我使用的Vue铬扩展看到该组件，它具有这样的特性，以便已被定义...我不知道我在做什么错...

在此先感谢。

来源

2017-07-06 Nerea

您在'SliderItem'组件定义'topSliderText'数据属性，但在'SliderItem'的父母使用它，这就是为什么你会得到警告。在父亲本身定义'topSliderText' –

@VamsiKrishna非常感谢你！它的工作原理:) – Nerea

我应该添加一个答案吗？ –

您在SliderItem组件中定义了topSliderText组件，但在父组件中使用它。

这就是你得到vue [警告]的原因，因为vue在父组件的属性中搜索topSliderText。

所以定义topSliderText如父组件本身

来源

2017-07-06 11:19:20

Vue组件不具约束力风格

回答

相关问题