Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.2k views
in Technique[技术] by (71.8m points)

vue中使用element异步渲染报错

问题:vue中使用axios请求的数据赋值之后控制台始终报错如下,
image.png

前端代码:
html渲染
<div class="content ">

                            <div class="list">
                                <div class="item" v-for="(item,index) in questionList" :key="index" v-show="questionList[0]">
                                    <div class="title">
                                        {{index+1}}. {{item.paramDescription}}
                                    </div> 
                                    <div class="type">
                                        <div v-show="item.componentType=='数值'" class="input">
                                            <el-input placeholder="请输入内容" v-model="item.answerContent" type="number"  clearable></el-input>
                                        </div>
                                        <div v-show="item.componentType=='单选框' && item.enumList" class="radio">
                                            <el-radio v-model="item.answerContent"  v-for="(text,keyIndex) in item.enumList"  :key="keyIndex" :label="text"></el-radio>
                                        </div>
                                        <div v-show="item.componentType=='多选框'&& item.enumList[0]" class="checkbox">
                                            <el-checkbox-group v-model="item.answerContent">
                                                <el-checkbox v-for="(text,keyIndex) in item.enumList" :label="text" :key="keyIndex">{{text}}</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

js 代码questionList赋值如下:
export default {

name: "Index",
data () {
    return {
        questionList:[],
    }
},
computed: {
    ...mapState(["diseaseData"])
},
mounted(){
    var data = this.diseaseData.params
    var arr =[]
    data.forEach(item=>{
        var obj = {}
        
        obj.componentType = item.componentType
        obj.enumList = item.enumList
        obj.isNull = item.isNull
        obj.paramChsName = item.paramChsName
        obj.paramDescription = item.paramDescription
        obj.paramName = item.paramName
        obj.paramType = item.paramType
        if(item.componentType !='多选框'){
            obj.answerContent = ''
        } else{
            obj.answerContent = []
        }
        arr.push(obj)
    }) 
    this.questionList = arr
    
},

};
找了半天没找到啥原因,网上也没找到答案,求解


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

image.png
换成 v-show 换成 v-if 就不报错了。

那么经典面试题就来,v-showv-if 有什么不同?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...