zoukankan      html  css  js  c++  java
  • vue+elemenUI——select下拉框初始化问题:数据已有,但不回显

    参考:https://blog.csdn.net/qq_43779703/article/details/100693565

         https://blog.csdn.net/xuaner8786/article/details/81217075

              https://blog.csdn.net/qq_31324879/article/details/101775469

    我的情况:下拉框数据根据后台返回的数据进行初始化,但一直无数据,控制台打印发现数据是有的,但不回显

    页面:

    <el-select  v-model="num" placeholder="选择数量"         
        @change="numChange"
        @visible-change="numTrigger">
        <el-option
           v-for="item in options_num"
                :key="item"
                :label="item"
                :value="item">
        </el-option>
    </el-select>

    data:

    data() {
          return {
            options_num: [],
            num: '',
          }
        },

    获取数据初始化:

     for (let i in res.data.list) {
         _this.options_num[i] = parseInt(i) + 1;
    }

    原因: 1. 后端传给我的value值是Number类型的,但是el-select绑定的值num是String类型的,值的类型不匹配,所以拿到数据显示在页面上会出现一些小问题

       解决: 将data中的 num:' '改为 num:0 即可

           2.

        数组的响应式方法:

           vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

            push()、pop()、shift()、unshift()、splice()、sort()、reverse()

        数组的非响应式方法:  

            由于 JavaScript 的限制,Vue 不能检测以下数组的变动:      

            (1). 当利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue,(就是我现在的方法,其实改用push就好)

            (2). 当修改数组的长度时,例如:vm.items.length = newLength

            针对(1)可用  this.set(object, key, value)方法将响应属性添加到嵌套的对象上.实现改变数据自动渲染,如下:  

     for (let i in res.data.list) {
          _this.$set(_this.options_num, i, parseInt(i) + 1);
    }

                          或者在初始化后添加一句:this.$forceUpdate() 强制刷新

            

            针对(2)可用splice

  • 相关阅读:
    为了快一点为什么却要慢一点
    大数与小数的求和算法
    Tips for newbie to read source code
    学习Data Science/Deep Learning的一些材料
    Git Sophisticated Commands
    两套JRE
    Java environment variables and their functionality
    Change Git Default Editor in Windows
    Multiton & Singleton
    Java Synchronized Blocks
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13093994.html
Copyright © 2011-2022 走看看