请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 反馈:框架中template里状态值是json对象时不更新的BUG

4
回复
143
查看
[复制链接]

5

主题

18

帖子

115

积分

 楼主| 2019-9-26 18:21:25 显示全部楼层 |阅读模式
本帖最后由 penghao@wifi.co 于 2019-9-26 18:23 编辑




<template>
  <div class="doc-page">
    <text>以下这是框架的缺陷吗?</text>
    <text>情况一:这里状态不改变?:{{JSON.stringify(tabIsLoadArr)}} - </text>
    <text>情况二:这里状态就能改变:{{JSON.stringify(tabIsLoadArr)}} - {{current_index}}</text>


    <tabs class="tabs" onchange="changeTabactive" index="0">
      <tab-bar class="tab-bar" mode="scrollable">
        <text class="tab-text" for="{{tabsMenu}}">{{$item.cityName}}-{{$idx}}</text>
      </tab-bar>
      <tab-content class="tab-content" scrollable="{{scrollable}}">
        <div class="item-container" for="{{tabsMenu}}">
          <text>{{$item.cityPath}}</text>
        </div>
      </tab-content>
    </tabs>
  </div>
</template>



<script>
export default {
  data: {
    componentName: 'tabs',
    current_index: 0,
    tabsMenu: [
      { cityName: "上海", cityPath: "shanghai" },
      { cityName: "北京", cityPath: "beijing" },
      { cityName: "郑州", cityPath: "zhengzhou" },
      { cityName: "南京", cityPath: "nanjing" },
      { cityName: "重庆", cityPath: "chongqing" },
      { cityName: "苏州", cityPath: "suzhou" },
      { cityName: "成都", cityPath: "chengdu" },
      { cityName: "深圳", cityPath: "shenzhen" },
    ],
    tabIsLoadArr: []
  },

  changeTabactive(e) {
    // 切换tab
    this.current_index = e.index;
    this.tabIsLoadArr[e.index] = true;
    console.info('切换tab: ' + e.index, this.tabIsLoadArr)
  },

}
</script>

<style>
/* 这是官网demo的基础css */
@import "../Common/css/common.css";

.tabs {
  flex: 1;
  margin-top: 20px;
  margin-right: 30px;
  margin-left: 30px;
  background-color: #ffffff;
}
.tab-content {
  flex: 1;
}
.tab-bar {
  height: 100px;
  border-color: #bbbbbb;
  color: #bbbbbb;
  border-bottom-width: 1px;
}
.tab-text {
  text-align: center;
  width: 200px;
}
.tab-text:active {
  color: #f76160;
}
.item-container {
  padding-top: 30px;
  padding-left: 0px;
  padding-right: 0px;
  flex-direction: column;
}
.item-content {
  flex-direction: column;
  padding-bottom: 30px;
}
.item-title {
  padding-top: 50px;
  padding-bottom: 20px;
  color: #aaaaaa;
}
.item-title-first {
  padding-top: 0px;
}
.item-input {
  height: 80px;
  margin-right: 60px;
  margin-left: 60px;
  padding: 20px;
  border-width: 1px;
  border-color: #bbbbbb;
  border-radius: 5px;
  font-size: 30px;
}
.item-picker {
  margin-right: 60px;
  margin-left: 60px;
  padding: 20px;
  border-width: 1px;
  border-color: #bbbbbb;
  border-radius: 5px;
}
.item-slider {
  padding: 20px;
}
.circular {
  width: 40px;
  height: 40px;
}
.list {
  flex: 1;
}
.load-more {
  justify-content: center;
  align-items: center;
  height: 100px;
}
.item {
  height: 150px;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.item_color {
  background-color: #f76160;
}
.switch-content {
  flex-direction: row;
  margin-left: 30px;
  margin-right: 30px;
}
.item-content-title {
  flex: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}
.switch {
  height: 50px;
  width: 320px;
}
</style>





回复

使用道具 举报

5

主题

18

帖子

115

积分

 楼主| 2019-9-27 10:02:28 显示全部楼层
展示效果是这样的:
WX20190927-100149@2x.png
回复

使用道具 举报

0

主题

3

帖子

15

积分

2019-9-27 12:03:11 显示全部楼层
问题已知悉,感谢反馈
回复

使用道具 举报

0

主题

1

帖子

5

积分

2019-9-27 19:41:22 显示全部楼层
这是因为数组的改变页面感受不到,所以页面更新不了,使用this.$set去设置数组的属性和值,页面就可以改变了
this.$set(`tabIsLoadArr${[e.index]}`,true)
回复

使用道具 举报

5

主题

18

帖子

115

积分

 楼主| 2019-10-8 17:01:18 显示全部楼层
v-liudan1@xiaom 发表于 2019-9-27 19:41
这是因为数组的改变页面感受不到,所以页面更新不了,使用this.$set去设置数组的属性和值,页面就可以改变 ...

感谢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册