关于子组建自身数据切换问题

Mopecat

1. data: {
2. indicatorList:[]
3. },

复制代码

我在子组建的data中定义了一个数组，然后我通过一个change事件去改变数组的值。template部分

1. <template>
2. <div class="banner">
3. <swiper
4. loop="{{loop}}"
5. autoplay="{{autoplay}}"
6. interval="{{interval}}"
7. @change="swiperChange" >
8. <block for="{{list}}">
9. <image @click="jumpTo($item.link)" src="{{$item.url}}"></image>
10. </block>
11. </swiper>
12. <div class="my-indicator">
13. <block for="indicatorList">
14. <text class="{{$item}}"></text>
15. </block>
16. </div>
17. </div>
19. </template>

复制代码

js部分：

1. export default {
2. props: {
3. loop: {
4. type: Boolean,
5. default: true
6. },
7. autoplay: {
8. type: Boolean,
9. default: false
10. },
11. interval: {
12. type: Number,
13. default: 3000
14. },
15. list:{
16. type: Array,
17. default:[]
18. }
19. },
20. data: {
21. indicatorList:[]
22. },
23. onInit(){
24. //console.log(this.bannerList);
25. console.info(`外部传递的数据`,this.loop,this.autoplay,this.list);
26. var that = this;
27. that.list.forEach(function(){
28. that.indicatorList.push('');
29. })
30. console.log(that.indicatorList);
31. },
32. swiperChange(evt){
33. for(var i=0;i < this.indicatorList.length;i++){
34. if(i === evt.index){
35. console.log('jin');
36. this.indicatorList[i] = 'active';
37. }else{
38. this.indicatorList[i] = '';
39. }
40. }
41. console.log(this.indicatorList);
42. },
43. jumpTo(link){
44. console.log(`myswiper组件的link`,link);
45. if(link !=='' && link !== undefined){
46. router.push({
47. url:link
48. })
49. }
50. }
51. }

复制代码

数组数据也变化了 如附件图片…… 但是text的class并没有变化。求大神指点迷津啊

ztd

for="indicatorList" 写成for="{{indicatorList}}"试试呢？

Mopecat

ztd 发表于 2018-11-19 11:46 for="indicatorList" 写成for="{{indicatorList}}"试试呢？

试过 没用的

dadong

MVVM的问题，数组里面的元素属性不会被检测，也就是说通过脚标改变元素的方式不会再模板上生效。具体为什么会这样可见这里https://github.com/vuejs/vue/issues/8562 。如果需要数组元素生效可以用$set完成

Mopecat

dadong 发表于 2018-11-19 14:44 MVVM的问题，数组里面的元素属性不会被检测，也就是说通过脚标改变元素的方式不会再模板上生效。具体为什么 ...

好吧 ……我改了一下，可以了

1. that.list.forEach(function(){
2. that.indicatorList.push({class:''});
3. })

复制代码

给对象赋值就好了