vue怎么进行dom的重复插入？

Question

要求获取到数据后页面展示包含select的li同时还有点一下按钮插一个相同含未选择value的select的li，由于vue的思想是数据驱动视图，所以我代码是这么写的

<li
    :class="[leftLiStyles]"
    v-for="(leftLi, index) in oriData"
    :key="leftLi.value"
    @click="leftLiClick(index)">
    <div style="width: 45%; height: 44px;">
        <el-select size="small" v-model="leftLi.value" class="m-x-l-2">
            <el-option
                v-for="item in nucDamCostItemOpt"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                track-by="$index">
            </el-option>
        </el-select>
        <el-checkbox class="m-x-l" v-model="leftLi.isDelete">剔除</el-checkbox>
        <i class="el-icon-delete" @click="delNucDamCostItem(index)"></i>
    </div>
    <ul class="pull-right">
        <li
            v-for="rightLi in rightLiCostDetail"
            :key="rightLi.value">
            <el-checkbox v-model="rightLi.isCheck" class="m-x-l-2">
                {{rightLi.label}}
                {{rightLi.supplyLabel !== '' ? ": " + rightLi.supplyLabel : ''}}
            </el-checkbox>
        </li>
    </ul>
    <el-checkbox-group
        v-model="chkDetilItem"
        v-for="i in leftLi.itemDetail"
        :key="i.value">
    </el-checkbox-group>
</li>

nucDamCostItemOpt: [
    {
        'value': '1',
        'label': '自付金额'
    },
    {
        'value': '2',
        'label': '总金额'
    }
]

rule: [
    {
        'value': '1',
        'label': '自付金额',
        'isDelete': true,
        'costDetail': [
            {
                'value': '1',
                'label': '收费项目类别',
                'supplyVal': '1',
                'supplyLabel': '西药',
                'isCheck': true
            },
            {
                'value': '2',
                'label': '收费项目等级',
                'supplyVal': '2',
                'supplyLabel': '甲级',
                'isCheck': true
            },
            {
                'value': '3',
                'label': '收费项目编码',
                'supplyVal': '',
                'supplyLabel': '',
                'isCheck': true
            }
        ]
    },
    {
        'value': '2',
        'label': '总金额',
        'isDelete': false,
        'costDetail': [
            {
                'value': '1',
                'label': '收费项目类别',
                'supplyVal': '',
                'supplyLabel': '',
                'isCheck': false
            },
            {
                'value': '3',
                'label': '收费项目编码',
                'supplyVal': '2',
                'supplyLabel': '甲级',
                'isCheck': true
            }
        ]
    }
]

其中oriData是全部数据，深拷贝自rule，然后我通过添加一个对象从而添加一个select

addRule () {
    this.oriData.push({
        'value': '',
        'label': '',
        'isDelete': false,
        'costDetail': []
    })
}

问题在于这样添加的新的select全是一个model，其中一个改变value其他全部都会跟着改变，该如何解决？

Answer 1

每调用一次addRule()，都是一个全新的model，改变其中一个不会改变其他数据。贴全部代码上来看看。

Answer 2

nucDamCostItemOpt做深度拷贝