嗨，我是 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”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。
vue-slider.js:562 [Vue 警告]：计算属性“topSliderText”已在数据中定义
但是当我使用 Vue chrome 扩展查看组件时，它具有这样的属性......我不知道我做错了什么......
提前致谢。
您定义了topSliderTextinSliderItem组件，但在父组件中使用了它。
这就是你在 vuetopSliderText在父组件的属性中搜索时得到 vue [warn] 的原因。
所以topSliderText在父组件本身定义为数据属性
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句