在element用v-for动态增加表单输入项的时候,动态增加的内容v-for(两层)没有渲染,点击增加其他v-for(一层)的内容是重新渲染了,包括前面的两层v-for。请教下,哪里写的不对呢?
https://gist.github.com/ccuni...
代码如下:
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link href="[//cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css](http://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css)" rel="stylesheet">
<title>广告平台配置</title>
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" :rules="rules" label-width="160px" status-icon="true" size="small">
<el-card shadow="never">
<el-divider content-position="left">广告平台配置</el-divider>
<el-form-item label="平台缩写" prop="platform">
<el-input v-model="form.platform" placeholder="平台缩写,英文数字下换线组成" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="平台名称" prop="platform_name">
<el-input v-model="form.platform_name" placeholder="广告平台名称" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="回传地址" prop="app_url">
<el-input v-model="form.app_url" placeholder="数据回传接口地址" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="请求方式" prop="http_method">
<template>
<el-radio-group v-model="form.http_method">
<el-radio :label="0">GET</el-radio>
<el-radio :label="1">POST</el-radio>
</el-radio-group>
</template>
</el-form-item>
<el-form-item label="表单content_type" prop="content_type">
<el-input v-model="form.content_type" placeholder="默认:application/x-www-form-urlencoded" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="提取clickid标识" prop="click_pattern">
<el-input v-model="form.click_pattern" placeholder="提取clickid标识" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="auth方法" prop="auth_func">
<el-input v-model="form.auth_func" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="数据签名方法" prop="sign_func">
<el-input v-model="form.sign_func" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="转化类型列表" prop="event_type">
<el-input type="textarea" :rows="3" v-model="form.event_type" placeholder="每行一个,格式 label:value" style="width:400px;"></el-input>
</el-form-item>
<el-form-item label="回传参数配置">
<el-row>
<span>[一级结点]</span> <el-button type="primary" @click="addFirstLevelParamInput">+增加参数</el-button>
</el-row>
<el-row v-for="(item, index) in form.dynamicFirstLevelParams" :key="index">
<el-col :span="0.5">
<el-form-item>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item
label="参数key" label-width="80px"
:prop="'dynamicFirstLevelParams.' + index + '.key'"
:rules="{required: true, message: 'key不能为空', trigger: 'blur'}"
>
<el-input v-model="item.key"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item
label="参数" label-width="80px"
:prop="'dynamicFirstLevelParams.' + index + '.input'"
:rules="{required: true, message: '参数不能为空', trigger: 'blur'}"
>
<el-select v-model="item.input" placeholder="请选择" @change="((val)=>{addSeconLevelParamInput(val, item.key)})">
<el-option
v-for="option in paramOptions"
:key="option.value"
:label="option.label"
:value="option.value"
:disabled="option.disabled">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-row v-if="item.input == 'ad_domain'">
<el-col :span="6">
<el-form-item label="wap" label-width="50px">
<el-input v-model="item.ext.ad_domain_wap"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="web" label-width="50px" >
<el-input v-model="item.ext.ad_domain_web"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="item.input == 'ad_source'">
<el-col :span="6">
<el-form-item label="标识" label-width="50px" >
<el-input v-model="item.ext.ad_source"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="item.input == 'ad_convert'">
<el-col :span="6">
<el-form-item label="标识" label-width="50px" >
<el-input v-model="item.ext.ad_convert"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="item.input == 'ad_array'">
<el-col :span="6">
<el-form-item label-width="20px" >
<el-checkbox v-model="item.ext.ad_array">多项</el-checkbox>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
<div v-for="(top_item, parent_index) in form.dynamicSecondLevelParams" :key="parent_index" :item="top_item">
<el-card class="box-card" v-if="top_item.length>0">
<template>
<div>
<span>[二级结点]上级节点:{{parent_index}}</span>
<el-button type="primary" @click="addSeconLevelParamInput('ad_array', parent_index)">+增加同级参数</el-button>
<el-divider></el-divider>
</div>
</template>
<el-row v-for="(son_item, son_index) in form.dynamicSecondLevelParams[parent_index]" :key="son_index">
<el-col :span="1">
<el-input v-model="parent_index" type="hidden"></el-input>
</el-col>
<el-col :span="3">
<el-form-item
label="参数key" label-width="80px"
:prop="'dynamicSecondLevelParams.' + parent_index + '.' + son_index + '.key'"
:rules="{required: true, message: 'key不能为空', trigger: 'blur'}"
>
<el-input v-model="form.dynamicSecondLevelParams[parent_index][son_index].key"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="参数" label-width="80px"
:prop="'dynamicSecondLevelParams.' + parent_index + '.' + son_index + '.input'"
:rules="{required: true, message: '参数不能为空', trigger: 'blur'}"
>
<el-select v-model="form.dynamicSecondLevelParams[parent_index][son_index].input" placeholder="请选择" @change="((val)=>{addThirdLevelParamInput(val, son_item.key)})">
<el-option
v-for="option in paramOptions"
:key="option.value"
:label="option.label"
:value="option.value"
:disabled="option.disabled">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-row v-if="son_item.input == 'ad_domain'">
<el-col :span="6">
<el-form-item label="wap" label-width="50px">
<el-input v-model="form.dynamicSecondLevelParams[parent_index][son_index].ext.ad_domain_wap"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="web" label-width="50px" >
<el-input v-model="form.dynamicSecondLevelParams[parent_index][son_index].ext.ad_domain_web"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="son_item.input == 'ad_source'">
<el-col :span="6">
<el-form-item label="标识" label-width="50px" >
<el-input v-model="form.dynamicSecondLevelParams[parent_index][son_index].ext.ad_source"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="son_item.input == 'ad_convert'">
<el-col :span="6">
<el-form-item label="标识" label-width="50px" >
<el-input v-model="form.dynamicSecondLevelParams[parent_index][son_index].ext.ad_convert"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="son_item.input == 'ad_array'">
<el-col :span="6">
<el-form-item label-width="20px" >
<el-checkbox v-model="form.dynamicSecondLevelParams[parent_index][son_index].ext.ad_array">多项</el-checkbox>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</div>
<div v-for="(top_item, parent_index) in form.dynamicThirdLevelParams" :key="parent_index" :item="top_item">
<el-card class="box-card" v-if="top_item.length>0">
<template>
<div>
<span>[三级节点]上级节点:{{parent_index}}</span>
<el-button type="primary" @click="addThirdLevelParamInput('ad_array', parent_index)">+增加同级参数</el-button>
<el-divider></el-divider>
</div>
</template>
<el-row v-for="(son_item, son_index) in top_item" :key="son_index">
<el-col :span="1">
<el-input v-model="parent_index" type="hidden"></el-input>
</el-col>
<el-col :span="3">
<el-form-item
label="参数key" label-width="80px"
:prop="'dynamicThirdLevelParams.' + parent_index + '.' + son_index + '.key'"
:rules="{required: true, message: 'key不能为空', trigger: 'blur'}"
>
<el-input v-model="son_item.key"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="参数" label-width="80px"
:prop="'dynamicThirdLevelParams.' + parent_index + '.' + son_index + '.input'"
:rules="{required: true, message: '参数不能为空', trigger: 'blur'}"
>
<el-select v-model="son_item.input" placeholder="请选择">
<el-option
v-for="option in paramOptions"
:key="option.value"
:label="option.label"
:value="option.value"
:disabled="option.disabled">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-row v-if="son_item.input == 'ad_domain'">
<el-col :span="6">
<el-form-item label="wap" label-width="50px">
<el-input v-model="son_item.ext.ad_domain_wap"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="web" label-width="50px" >
<el-input v-model="son_item.ext.ad_domain_web"></el-input>
</el-form-item>
</el-col>