Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

element 表单 v-for动态渲染问题

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

element 表单 v-for动态渲染问题

在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>


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

1 Reply

0 votes
by (71.8m points)

add 时绑定的方法出问题了：

addSeconLevelParamInput(value, parent_key) {
    if(value === 'ad_array') {
        if(parent_key in this.form.dynamicThirdLevelParams == false){
            // 问题出在这里，直接赋值空数组，导致其并不是响应式的数据
            // this.form.dynamicSecondLevelParams = [];
            this.$set(this.form.dynamicSecondLevelParams, parent_key, [])
        }
        this.form.dynamicSecondLevelParams[parent_key].push({
            parent: parent_key,
            key: '',
            input: '',
            ext: {}
        });
    }
},

把addThirdLevelParamInput 也照着改了
原因参考链接：https://cn.vuejs.org/v2/guide...


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...