Vue问题记录

一、数据更新问题

数据更改界面没更新问题
原因:数据层次太多,没有触发render函数进行自动更新
1、需手动调用

this.$forceUpdate()

2、数组更新方式

Vue.set(array, index, newData)

二、调用控件的方法报错

原因:默认Visible是false,在设置visible=ture的方法中同时调用控件里的方法,此时ref还未加入到refs里面

setTimeout(() => {
  this.$refs.car.goTo(index, true)
}, 0)

即使延时为0,但是setTimeout方法是在所有方法走完才调用,此时ref已经加入到了refs里了

三、form表单问题

1、使用form表单显示数据时,有多个v-if,此时会出现下面那个数据设置不上去

解决方法:
使用多个setTimeout,第一个是设置上面的数据,第二个是设置设置不是数据的那几个数据

        getVoucherIssuanceGet(params).then(res => {
          this.data = res.resultBody
          this.dateType = this.data.dateType + ''
          this.template = this.data.templateArray
          // 通过type设置某个view显示与否
          this.onChangeType(this.data.distributeType)
          setTimeout(() => {
            this.form.setFieldsValue({
              'voucherUseRuleId': this.data.voucherUseRuleId,
              'dateType': this.dateType,
              'voucherDays': this.data.voucherDays
            })
          }, 0)
          setTimeout(() => {
            this.form.setFieldsValue({
              'distributeType': this.data.distributeType,
              'userId': this.data.userId
            })
          }, 200)
        })

2、form表单使用for循环设置(类似于动态添加formitemb

跟其他非form循环不同的是在子控件中使用下标用的单引号是``,而非‘’

<template>
  <dev>
    <a-card title="澳门新葡新京app下载频道管理">
      <a-form :form="form" @submit="onCommitChannel">
        <a-form-item
          v-bind="formCol"
          label="背景色"
        >
          <a-input
            v-decorator="[
              'backColor',
              { rules: [{ required: false }] },
            ]"
            placeholder="请输入背景色"
          />
          <p>默认背景色为白色,若需调整模块背景颜色,请输入十六进制颜色码,如“#ffff00”</p>
        </a-form-item>
        <a-card
          v-for="(num, index) in couponNum"
          :key="num"
        >
          <div slot="title">
            <p>频道 {{ num }}</p>
          </div>
          <a-form-item
            v-bind="formCol"
            label="频道名称(中文)"
          >
            <a-input
              v-decorator="[
                `channelCNList[${index}]`,
                { rules: [{ required: true, message: '请输入频道中文名称' }] },
              ]"
              placeholder="请输入频道中文名称"
            />
          </a-form-item>
        </a-card>
        <div class="row-button">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button type="danger" icon="reload" class="marginLeft">更新澳门新葡新京app下载</a-button>
        </div>
      </a-form>
    </a-card>
  </dev>
</template>

<script>
export default {
  data () {
    return {
      couponNum: 2,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    onCommitChannel (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
          console.log(values, 'values')
        if (!err) {
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
  .row-button{
    display: flex;
    padding-top: 10px;
    width: 800px;
    justify-content: center
  }
  .marginLeft {
    margin-left: 20px
  }
</style>

四、下载Excel文件时乱码

解决方案:设置 responseType: 'blob'
具体实现见代码

      const token = Vue.ls.get(ACCESS_TOKEN) || process.env.VUE_APP_AUTH_KEY
      axios.get(this.action,{params: param, headers:{ Authorization: token}, responseType: 'blob'},).then((response) => {
          console.log(response, 'response')
          const blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          })
          console.log(blob, 'blob')
          const fileName = '数据.xlsx'
          var link = document.createElement('a')
          link.href=window.URL.createObjectURL(new Blob([response.data]))
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href) // 释放内存
    }).catch(function (res) {})

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 5,010评论 1赞 18
  • 关于在组件的局部作用域引入css样式 1. 通常使用做法:在组件内部script标签内引入, 会在该组件运行时被加...
    土豆切成片阅读 293评论 0赞 0
  • 报错信息: (在vue里面,对象/数组的默认值应该由一个工厂函数返回) 错误代码: 解决方法:
    明灭_阅读 734评论 0赞 2
  • 今天在vue-cli项目时出现了一排错误 里面说我的keys重复了导致更新错误,随后我想想了,我只在循环里面用到了...
    Monica114阅读 17评论 0赞 0
  • 影片开头笑料不断,这兄妹俩也太可爱了叭,其实也并没觉得哥哥有多么不好,倒是觉得那样也给生活增添了不少乐趣,...
    半糖鲸阅读 22评论 0赞 1