vue的key属性

前提

在form表单需要实现两个输入框,绑定对象的两个属性一个存储key，一个存储value

遇到的问题

绑定值（key）的输入框，在一次输入后锚点就消失了，绑定名称（name）的输入框可以正常的使用

错误代码

statusType = [{
    key:"",
    value:""
}]

<el-form-item
    prop="valueRange"
    v-for="item in statusType"
    :key="item.key"
    :value="item.key"
>
    <el-col :span="10">
        <el-input placeholder="值" v-model="item.key"></el-input>
    </el-col>
    <el-col :span="4" style="text-align:center">:</el-col>
    <el-col :span="10">
        <el-input placeholder="名称" v-model="item.value"></el-input>
    </el-col>
</el-form-item>

原因

在列表循环的时候key绑定的是item.key  // el-form-item :key="item.key" 
但是 值 输入框中绑定的数据也是 item.key
因为Vue是基于虚拟dom对元素进行重新渲染
每次输入都会改变key值，key属性值的改变会导致dom的重新渲染
所以锚点会消失！

解决方案

将父级元素的key属性通过index来绑定

<el-form-item
    prop="valueRange"
    v-for="(item,index) in statusType"
    :key="index"
    :value="item.key"
>
    <el-col :span="10">
        <el-input placeholder="值" v-model="item.key"></el-input>
    </el-col>
    <el-col :span="4" style="text-align:center">:</el-col>
    <el-col :span="10">
        <el-input placeholder="名称" v-model="item.value"></el-input>
    </el-col>
</el-form-item>

扩展应用

需求

页面有上下两个表格，上 -> 订单表、下 -> 详细表
通过点击订单表的某一行订单，获取到他的inboundOrderSn字段，并通过该字段向接口发送请求，获取详细数据并在下方的表格显示

难点

子组件封装的是在刷新之后对接口进行请求等价于在mounted/created内才会请求数据，但是组件在页面一开始就已经创建完成了，所以在点击的时候并不会进行数据的请求，就得需要重新渲染该组件。

解决方法

给详细列表组件绑定key属性，在点击某一订单的时候，对key值进行改变，组件就会重新渲染一次。就可以发送请求并对数据进行展示

<detail-table :key="timer" :id="selectedId" @success="forceRefresh"></detail-table>

private timer: number = new Date().getTime();

private handleRowClick(row: any) {
    this.timer = new Date().getTime();
    this.selectedId = row.inboundOrderSn ? row.inboundOrderSn : '';
}