vue array 表单验证 All In One

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, 禁止转载 ️，侵权必究⚠️！

---