当前位置： 文江博客话题详情

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

发布于 2022-09-12 02:32:21 字数 18409 浏览 11 评论 0

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

</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="son_item.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="son_item.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="son_item.ext.ad_array">多项</el-checkbox>

</el-form-item>

</el-col>

</el-row>

</el-col>

</el-row>

</el-card>

</div>

</el-form-item>

<el-row>

<el-col :span="3">

<el-form-item label="返回结果key" prop="response.key">

<el-input v-model="form.response.key" style="width:100px;"></el-input>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="返回结果value" prop="response.value">

<el-input v-model="form.response.value" style="width:100px;"></el-input>

</el-form-item>

</el-col>

</el-row>

<el-form-item>

<el-button type="primary" @click="onSubmit">保存</el-button>

</el-form-item>

</el-card>

</el-form>

</div>

</body>

<script src="[https://cdn.bootcss.com/axios/0.18.0/axios.min.js](https://cdn.bootcss.com/axios/0.18.0/axios.min.js)"></script>

<!-- import Vue before Element -->

<script src="[//cdn.bootcss.com/vue/2.6.10/vue.min.js](http://cdn.bootcss.com/vue/2.6.10/vue.min.js)"></script>

<!-- import JavaScript -->

<script src="[//cdn.bootcss.com/element-ui/2.13.0/index.js](http://cdn.bootcss.com/element-ui/2.13.0/index.js)"></script>

<script>

new Vue({

el: '#app',

data: function () {

return {

form: {"platform":"","platform_name":"","app_url":"","dynamicFirstLevelParams":[{"key":"level_key","input":"ad_array","ext":[]}],"dynamicSecondLevelParams":{"level_key":[{"parent":"level_key","key":"level2_key","input":"ad_array","ext":[]}]},"dynamicThirdLevelParams":[],"response":{"key":"","value":""},"created_at":"","updated_at":""},

paramOptions: [{"label":"lp_url","value":"ad_url"},{"label":"\u6295\u653e\u57df","value":"ad_domain"},{"label":"clickid","value":"ad_clickid"},{"label":"event_type","value":"ad_event_type"},{"label":"event_time 10","value":"ad_event_time10"},{"label":"event_time 13","value":"ad_event_time13"},{"label":"\u56de\u4f20\u552f\u4e00\u503c","value":"ad_trans_id"},{"label":"\u56de\u4f20\u8d26\u53f7","value":"ad_account"},{"label":"\u7528\u6237\u884c\u4e3a\u6e90id","value":"ad_user_action_set_id"},{"label":"openid","value":"ad_openid"},{"label":"\u5e7f\u544a\u4e3b\u6807\u8bc6","value":"ad_source"},{"label":"\u662f\u5426\u8f6c\u5316","value":"ad_convert"},{"label":"\u4e8c\u7ef4\u6570\u7ec4","value":"ad_array"}],

//验证

rules: {

platform: [

{required: true, message: '平台缩写不能为空', trigger: 'blur'},

],

platform_name: [

{required: true, message: '平台名称不能为空', trigger: 'blur'},

],

app_url: [

{required: true, message: '回传地址不能为空', trigger: 'blur'},

],

event_type: [{required: true, message: '转化类型列表不能为空', trigger: 'blur'}],

response: [{required: true, message: '返回结果特征不能为空', trigger: 'blur'}]

}

}

},

computed: {

eventOptions: function () {

}

},

methods: {

addEventValue(e) {

this.form.events[e].value.push('')

},

addFirstLevelParamInput() {

this.form.dynamicFirstLevelParams.push({

key: '',

input: '',

ext: {}

});

},

addSeconLevelParamInput(value, parent_key) {

console.log(value, parent_key);

if(value == 'ad_array') {

if(parent_key in this.form.dynamicSecondLevelParams == false){

this.form.dynamicSecondLevelParams[parent_key] = [];

console.log('ok');

}

this.form.dynamicSecondLevelParams[parent_key].push({

parent: parent_key,

key: '',

input: '',

ext: {}

});

console.log(this.form.dynamicSecondLevelParams);

}

},

addThirdLevelParamInput(value, parent_key) {

if(value == 'ad_array') {

if(parent_key in this.form.dynamicThirdLevelParams == false){

this.form.dynamicThirdLevelParams[parent_key] = [];

console.log('ok');

}

this.form.dynamicThirdLevelParams[parent_key].push({

parent: parent_key,

key: '',

input: '',

ext: {}

});

console.log(this.form.dynamicThirdLevelParams);

}

},

deleteFirstItem(item,index) {

this.form.dynamicFirstLevelParams.splice(index, 1);

console.log(this.form.dynamicThirdLevelParams);

},

deleteSecondItem(parent_key,index) {

console.log(parent_key,index);

this.form.dynamicSecondLevelParams[parent_key].splice(index, 1);

console.log(this.form.dynamicThirdLevelParams);

},

deleteThirdItem(parent_key,index) {

this.form.dynamicThirdLevelParams[parent_key].splice(index, 1);

console.log(this.form.dynamicThirdLevelParams);

},

//表单提交验证

onSubmit() {

const self = this

this.$refs['form'].validate((valid) => {

if (valid) {

self.postForm()

} else {

self.$message.error("请检查表单内容");

return false;

}

});

},

//表单提交处理

postForm() {

const self = this

console.log(this.form);

axios.post('/Admin/Ad/savePlatform', this.form)

.then(function (response) {

if (response.data.status == 1) {

self.$message({

message: response.data.info,

type: 'success',

onClose: function () {

location.href = '/Admin/Ad/platform';

}

});

} else {

self.$message.error(response.data.info);

}

})

.catch(function (error) {

alert(error);

console.log(error)

});

}

}

})

</script>

</html>`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

小耗子 2022-09-19 02:32:21

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

回复
玩套路吗 2022-09-19 02:32:21

v-for 循环的key 别用index 。最好用特殊的Id

回复
~没有更多了~

关于作者

剩一世无双

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文