vue array 表单验证 All In One
使用 array index 校验 （不重复 key）
:prop="`creativeBoxList.${index}`"
template v-if & unique key
<section>
<template v-if="isShowPlayable">
<el-form-item class="is-required" label="试玩">
<el-radio-group
v-model="creativeBox.is_playable"
@change="handleChangeIsPlayable(creativeBox)">
<!-- TODO: 文案统一？ -->
<!-- <el-radio-button :label="0">关闭</el-radio-button>
<el-radio-button :label="1">开启</el-radio-button> -->
<el-radio-button :label="0">不启用</el-radio-button>
<el-radio-button :label="1">启用</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="creativeBox.is_playable">
<el-form-item
label="试玩"
:prop="`creativeBoxList.${index}`"
:key="`creativeBoxList.${index}_url`"
class="playable-wrap"
:rules="[{
required: true,
validator: validateBoxPlayable,
trigger: 'blur',
}]">
<el-button type="primary" class="f12" @click="handleOpenPlayableUrl">
选择素材
</el-button><br>
<div
v-if="!!creativeBox.playable_url"
class="select-playable-item m-t-10 c-666 m-l-10 c-blue lh26">
{{creativeBox.playable_name}}
<i
class="el-icon-close m-l-5 f10 hand"
@click="handleClearPlayableUrl(creativeBox)"
/>
</div>
</el-form-item>
</template>
</template>
<template v-if="isShowBasicComponent">
<el-form-item
label="基础组件"
:prop="`creativeBoxList.${index}`"
:key="`creativeBoxList.${index}_id`"
class="playable-wrap"
:rules="[{
required: true,
validator: validateBasicComponent,
trigger: 'blur',
}]">
<el-button type="primary" class="f12" @click="openBasicComponent">
选择组件
</el-button><br>
<div
v-if="!!creativeBox.component_id"
class="select-playable-item m-t-10 c-666 m-l-10 c-blue lh26">
{{creativeBox.component_name}}
<i
class="el-icon-close m-l-5 f10 hand"
@click="removeBasicComponent"
/>
</div>
</el-form-item>
</template>
</section>
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！