zoukankan      html  css  js  c++  java
  • vue+vuex 修复数据更新页面没有渲染问题

    不解:

    为什么在关闭开关后,已经将data里的属性和vuex属性初始化后,页面就是不响应???

    问题:

    由于切换路由后,获取到vuex的数据在created中赋值到data相对应的属性中,在关闭开关后请求接口将vuex和data里的属性全部初始化,数据变更成功页面不渲染。(接口只做请求,不做数据返回,由前端实现界面选择回显)

    处理:computed + watch 在当前的页面中监听vuex中的数据变化,重新赋值给data里的属性,使页面渲染回初始化。

    技术:vue,vuex

    页面元素:

    1个开关switch,10个多选框数据

    操作步骤:

    1 进入页面

    2 全选数据后打开开关,请求接口

    3 切换路由后将数据保存至vuex,当路由切换会当前页时从vuex取出数据实现页面的回显

    4 关闭开关,请求接口

    代码:

    开关对应代码

    <el-switch
                v-model="fruitswitch"
                class="switchStyle"
                active-text="Yes"
                inactive-text="NO"
                :active-value="1"
                :inactive-value="0"
                @change="handleDebug"
              />
    handleDebug(newV) {
          if (newV) {
            if (this.checkFruits.length === 0) {
              this.fruitswitch= 0;
              this.$message('请选择水果!');
            } else {
              this.$store.dispatch('fruits/save_fruits', newV);
              !store.getters.fruits_switch && this.FruitsOpenSubmit();
              // 加入定时器代码
              this.timerSet(1);
            }
          } else {
            this.FruitsSubmitClosed();
          }
        },

    开关关闭:

    
    
    FruitsSubmitClosed() {
    //
    submitInfo(this.submit_info)
    .then(res
    => {
    this.$store.dispatch('fruits/save_fruits', 0);
    this.checkFruits = [];
    this.checkAll = false;
    this.isIndeterminate = false;
    this.debugInfoSwitch = 0;
    this.$message.success(res.msg);
    })
    .catch(() => {
    this.$message.error('失败!');
    this.fruitswitch= 0; });
    }
  • 相关阅读:
    PHP 日期的时区差异
    c++与c输出输入语句时空区别
    数据库中完整性约束的SQL定义几点小解
    字符的一字节8位问题
    C#抽象类
    SQL server 中SUBSTRING()以及CONVERT()的用法
    关于CS模式下,控制一个容器内控件的值问题
    新的公司新的感受
    小生谈字符串的截取函数SubString()仅限csharp语言
    LINQ中怎么使用NEWID()之自我学习与理解
  • 原文地址:https://www.cnblogs.com/min77/p/13897891.html
Copyright © 2011-2022 走看看