在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ iview+vue.js中數(shù)組中含有數(shù)組頁面渲染不出來

iview+vue.js中數(shù)組中含有數(shù)組頁面渲染不出來

1.回顯頁面的時(shí)候,數(shù)據(jù)渲染不出來,頁面代碼如下

<style>
</style>
<template>
  <transition name="right-div">
    <div class="right-div" v-if="divShow" :style="{height:divH+'px',width:'60%'}">
      <p class="title">{{id?'編輯':'新增'}}調(diào)查問卷
        <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="狀態(tài)">
            <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})">添加標(biāo)題
          </Button>
        </h2>
        <Card  v-for="(voteTitle,index) in form.flupVoteTempTitleList">
          <Row>
            <Col :span="3">
            <span>問卷標(biāo)題{{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()">關(guān)閉</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: '請?zhí)顚憜柧砟0迕Q'},
          ],
        },
        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: {//檢測數(shù)據(jù)
      id(val) {
        if (val&&this.divShow) {
          this.loadDetail();
        } else {
          this.form = Object.assign({}, model);
        }
      },
    },
    created() {
    }
  }
</script>

clipboard.png

clipboard.png

回答
編輯回答
我不懂

圖片描述

這個(gè)是編輯效果。是我問題沒有描述清楚。
旁邊有一個(gè)收起按鈕,是一個(gè)頁面的變量,true的時(shí)候才會(huì)顯示。這個(gè)字段數(shù)據(jù)庫沒有保存,所以在后臺(tái)取回?cái)?shù)據(jù)的時(shí)候沒有這個(gè)變量。所以頁面沒有渲染出來,給人的感覺就是代碼邏輯寫錯(cuò)了。
解決方法就是:在后臺(tái)傳回來的時(shí)候給這個(gè)字段賦值,或者在頁面加載的時(shí)候賦值

2018年6月10日 09:00
編輯回答
孤毒

將調(diào)用 loadDetail 的代碼邏輯放在放在 created 當(dāng)中

2018年1月11日 07:58