后台数据渲染options

选择框的数据需要获取后台数据,最开始在mounted里获取数据,数据拿到了,但是视图不更新。

错误代码:
<temple>
     <el-select v-model="list" placeholder="请选择">
        <el-option v-for="item in operationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
</temple>

<script>
    import axios from "axios"

    export default {
        name: "options",
        data() {
            return {
                operationOptions:[],
            }
        },
        mounted(){
            this.getOperationOptions(),
        },
        methods:{
            getOperationOptions(){
                let self = this
                axios.get("..." )    //这里是你的地址
                    .then(res => {
                        let tempResponse = res.data.replace(/:(\d+)([,\}])/g, ':"$1"$2')
                        let result = JSON.parse(tempResponse)['data']
                        self.operationOptions = result.map(
                              item=> ({
                                  "value": item.id,
                                  "label": item.Name,
                        })
                    )
                 });
            } 
        }
    }
</script>
后来改成这样 , 正确代码:
<temple>
     <el-select v-model="list" placeholder="请选择">
        <el-option v-for="item in operationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
</temple>

<script>
    import axios from "axios"

    export default {
        name: "options",
        data() {
            return {
               //这里没了
            }
        },
        created:{
            operationOptions() {
                let obj = [];
                axios.get("..." )    //这里是你的地址
                    .then(res => {
                        let tempResponse = res.data.replace(/:(\d+)([,\}])/g, ':"$1"$2')
                        let result = JSON.parse(tempResponse)['data']
                        result.forEach((item, index) => {
                            obj.push({
                                "value": item.id,
                                "label": item.albumName,
                            });
                        });
                    });
                return obj;
            }
        }
    }
</script>

这样就OK啦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,554评论 0 17
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,145评论 1 32
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,750评论 1 52
  • 去年寒假参加了叙事者教师群,我曾经坚持写作三十天,而且都是围绕着教育主题。不过还好,没有挤牙膏一样受难为,比较圆满...
    过河小卒2008阅读 181评论 0 0
  • 连续几天不见太阳,云层也压得极低。常有一些冰凉的小点扑上脸颊、钻进脖颈,让人以为雨就要来了,却又总在一阵风后消散无...
    山居散人阅读 2,588评论 34 115