Vue组件没有绑定样式答案

【问题标题】：Vue component not binding styleVue组件没有绑定样式
【发布时间】：2017-12-10 07:03:05
【问题描述】：

您好，我是 Vue 的新手，所以也许我遗漏了一些明显的东西。我有一个组件SliderItem，我想设置它的顶部位置，所以我向数据添加了一个属性：

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”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

vue-slider.js:562 [Vue 警告]：计算属性“topSliderText”已在数据中定义

但是当我使用 Vue chrome 扩展查看组件时，它具有属性所以...我不知道我做错了什么...

提前致谢。

【问题讨论】：

您在SliderItem 组件中定义了topSliderText，但在SliderItem 的父级中使用它，这就是您收到警告的原因。在父级本身中定义topSliderText
@VamsiKrishna 非常感谢您！它有效:)
我要添加答案吗？
当然可以！！

标签： javascript vuejs2

【解决方案1】：

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

这就是 vue 在父组件的属性中搜索 topSliderText 时得到 vue [warn] 的原因。

所以将topSliderText定义为父组件本身的数据属性

【讨论】：