素材牛VIP会员
iview+vue.js中数组中含有数组页面渲染不出来
 lo***ng  分类:JavaScript  人气:4405  回帖:3  发布于6年前 收藏

1.回显页面的时候,数据渲染不出来,页面代码如下

<style>
</style>
<template>
  <transition name="right-div">
    <div class="right-div" v-if="divShow" :style="{height:divH+'px',width:'60%'}">
      <p class="title">{{id?'编辑':'新增'}}调查问卷
        <Button type="text" class="pull-right" @click="$parent.closeDiv()" icon="close"></Button>
      </p>
      <p class="content">
      <Form ref="form" :model="form" :rules="rules" :label-width="80">
        <Row>
          <Col :span="12">
          <FormItem label="问卷名称" prop="name">
            <Input type="text" v-model="form.name"></Input>
          </FormItem>
          </Col>
          <Col :span="12">
          <FormItem label="状态">
            <RadioGroup v-model="form.status">
              <Radio label="1" true-value="1">激活</Radio>
              <Radio label="0" true-value="0">禁用</Radio>
            </RadioGroup>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <FormItem label="问卷描述" >
            <Input type="textarea" :rows="2" v-model="form.remark"></Input>
          </FormItem>
        </Row>
        <h2>配置问卷
          <Button type="primary" size="small" icon="plus" class="pull-right"
                  @click="form.flupVoteTempTitleList.push({title:'',flupVoteTempQuestionList:[],show:true})">添加标题
          </Button>
        </h2>
        <Card  v-for="(voteTitle,index) in form.flupVoteTempTitleList">
          <Row>
            <Col :span="3">
            <span>问卷标题{{index + 1}}:</span>
            </Col>
            <Col :span="10">
            <Input type="text" v-model="voteTitle.title" size="small" :aria-required="true" error="请输入"></Input>
            <div v-model="voteTitle.sortNum" size="small" :value="{index}">
            </div>
            </Col>
            <Col :span="3">
            <Button type="text" @click="voteTitle.flupVoteTempQuestionList.push({subject:'',flupVoteTempItemList:[],show:true})" class="red">
              <Icon type="plus"></Icon>
              添加题目
            </Button>
            </Col>
            <Col :span="2">
            <Button type="text" @click="form.flupVoteTempTitleList.splice(index,1)" class="red">
              <Icon type="ios-trash-outline"></Icon>
              删除
            </Button>
            </Col>
            <Col :span="3">
            <Button type="text" @click="voteTitle.show=(voteTitle.show==true)?false:true" class="red">
                <span v-if="voteTitle.show==true">
                <Icon type="chevron-up"></Icon>
                收起
                </span>
              <span v-if="voteTitle.show==false">
                <Icon type="chevron-down"></Icon>
                显示
                </span>
            </Button>
            </Col>
          </Row>
          <Card v-for="(voteQuestion,index) in voteTitle.flupVoteTempQuestionList" v-show="voteTitle.show">
            <Row>
              <Col :span="3">
              <span v-model="voteQuestion.sortNum">问卷题目{{index + 1}}:</span>
              </Col>
              <Col :span="12">
              <Input type="text" v-model="voteQuestion.subject" size="small"></Input>
              <!--<div v-model="voteQuestion.val" size="small" :value="{index}"></div>-->
              </Col>
              <!--<Col span="2" style="text-align: center">-</Col>-->
              <!--<Col :span="3">-->
              <!--<Input type="text" v-model="voteQuestion.subject" size="small"></Input>-->
              <!--</Col>-->
              <Col :span="3">
              <Button type="text" @click="voteTitle.flupVoteTempQuestionList.splice(index,1)" class="red">
                <Icon type="ios-trash-outline"></Icon>
                删除
              </Button>
              </Col>
            </Row>
          </Card>
        </Card>
      </Form>
      </p>
      <p class="bottom">
        <Button type="primary" icon="archive" @click="handleSubmit" :disabled="disabled">保存</Button>
        <Button type="ghost" style="margin-left: 8px" @click="handleReset">重置</Button>
        <Button type="ghost" icon="close" @click="$parent.closeDiv()">关闭</Button>
      </p>
    </div>
  </transition>
</template>
<script>
  import http from '../../../api/http'
  import Input from "iview/src/components/input/input";

  var model = {
    name:'',
    status:'1',
    remark:'',
    flupVoteTempTitleList:[]};
  export default {
    components: {Input},
    data() {
      return {
        disabled: false,
        rules: {
          name: [
            {required: true, message: '请填写问卷模板名称'},
          ],
        },
        form: Object.assign({}, model),
        divH:window.innerHeight-60
      }
    },
    props: {
      id: {type: String},
      divShow: {type: Boolean, default: false}
    },
    methods: {
      handleSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            var vm = this;
            vm.disabled = true;
            http.postData(vm, "/flup/votetemp/save", {json: JSON.stringify(vm.form)}, function (resp) {
                var ret = resp.body;
                if (ret.code === '111') {
                  vm.$parent.onSubmit();
                  vm.$parent.closeDiv();
                  vm.form = Object.assign({}, model);
                  vm.$Message.info(ret.msg?ret.msg:'保存成功!')
                }else{
                  vm.$Message.error(ret.msg?ret.msg:'保存失败!')
                }
                vm.disabled = false;
              },function(e){
                vm.disabled=false;
              }
            );
          }
        })
      },
      handleReset() {
        this.$refs['form'].resetFields();
      },
      loadDetail() {
        if (this.id != undefined && this.id != '') {
          var vm = this;
          http.postData(vm, "/flup/votetemp/detail/" + this.id, {}, function (resp) {
              var ret = resp.body;
              if (ret.code === '111') {
                vm.form = ret.value;
                var titleList = ret.value.flupVoteTempTitleList;
                debugger;
                for(var i=0;i < titleList.length;i++){
                  var questions = titleList[i].flupVoteTempQuestionList;
                  // ret.value.flupVoteTempTitleList[i].push({subject:'112',flupVoteTempItemList:[],show:true});
                  for (var j=0;j < questions.length;j++){
                    console.log(ret.value.flupVoteTempTitleList[i].flupVoteTempQuestionList[j]);
                  }
                }
              }
            }
          );
        }
      }
    },
    watch: {//检测数据
      id(val) {
        if (val&&this.divShow) {
          this.loadDetail();
        } else {
          this.form = Object.assign({}, model);
        }
      },
    },
    created() {
    }
  }
</script>

 标签:javascript

讨论这个帖子(3)垃圾回帖将一律封号处理……

Lv5 码农
lu***ha 软件测试工程师 6年前#1
Lv 牛魔王
素材牛 PHP开发工程师 5年前#2
这样啊
Lv2 入门
ly***28 职业无 5年前#3
大神好厉害
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取