vue中, 表格行, 需要实现当商品信息被选择的时候, 同时把商品的其它信息也写入到订单数据的其它几个字段中.
<template v-for="(record,index) in DataSource">
<tr >
<td>
<a-select
v-model="record.SKU"
placeholder="商品编码(SKU)"
@change="(value,e) => {
record.SKU = value;
record.ProductName = e.data.attrs.dataitem.商品名称;
this.$forceUpdate();
}"
@search="(v)=>onSKUSearch(v,'SKUDataSourceObjects')"
>
<a-select-option v-for="shangpin in SKUDataSourceObjects" :key="shangpin.商品编码" :dataitem="shangpin" >
{{shangpin.商品编码}}
</a-select-option>
</a-select>
</td>
<td>
{{record.ProductName}}
</td>
</tr>
</template>
以上写法如果不写
this.$forceUpdate();
那么会有可能不更强其它的td数值内容…
但是写了又发现.这里面的this 无法访问 forceUpdate(); 这个函数.
因为这个this指向的是 当前的select 控件…
那可怎么办呢?
有没有能够全局一个方法强制执行刷新的呢?
找了半天, 没有…!!!
有没有什么办法访问到 this.$forceUpdate(); 中想要的哪个this?
例如 vm. $forceUpdate(); 也好呀.
找了半天, 还是没有…!!!
这可怎么办呢? 只有一个办法. 把 @change 函数写到 正规的methods 下面.
改成下面这样.
<template v-for="(record,index) in DataSource">
<tr >
<td>
<a-select
v-model="record.SKU"
placeholder="商品编码(SKU)"
@change="(value,e) => onSKUSelect(value,e,record,index)"
@search="(v)=>onSKUSearch(v,'SKUDataSourceObjects')"
>
<a-select-option v-for="shangpin in SKUDataSourceObjects" :key="shangpin.商品编码" :dataitem="shangpin" >
{{shangpin.商品编码}}
</a-select-option>
</a-select>
</td>
<td>
{{record.ProductName}}
</td>
</tr>
</template>
<script>
export default {
name: "ProductionRegister",
components:{
//EditTable,
//ProductionRegisterForm,
},
data() {
return {
DataSource:[]
}
},
methods:{
onSKUSelect(value,e,record,index){
{
record.SKU = value;
record.ProductName = e.data.attrs.dataitem.商品名称;
this.$forceUpdate(); //放在这里写的this, 指向的是 当前数据
}
}
}
</script>
既然必须这样. 那是不是可以这样?
<template v-for="(record,index) in DataSource">
<tr >
<td>
<a-select
v-model="record.SKU"
placeholder="商品编码(SKU)"
@change="(value,e) => (value,e) => {
record.SKU = value;
record.ProductName = e.data.attrs.dataitem.商品名称;
UpdateView(); //这里直接访问不再调用this
}"
@search="(v)=>onSKUSearch(v,'SKUDataSourceObjects')"
>
<a-select-option v-for="shangpin in SKUDataSourceObjects" :key="shangpin.商品编码" :dataitem="shangpin" >
{{shangpin.商品编码}}
</a-select-option>
</a-select>
</td>
<td>
{{record.ProductName}}
</td>
</tr>
</template>
<script>
export default {
name: "ProductionRegister",
components:{
//EditTable,
//ProductionRegisterForm,
},
data() {
return {
DataSource:[]
}
},
methods:{
UpdateView( ){
{
this.$forceUpdate(); //放在这里写的this, 指向的是 当前数据
}
}
}
</script>
后来又转念一想, UpdateView可以不要this.
$forceUpdate()是不是也可以不要this.
改成下面这样.
<template v-for="(record,index) in DataSource">
<tr >
<td>
<a-select
v-model="record.SKU"
placeholder="商品编码(SKU)"
@change="(value,e) => (value,e) => {
record.SKU = value;
record.ProductName = e.data.attrs.dataitem.商品名称;
$forceUpdate(); //这里直接访问不再调用this.
}"
@search="(v)=>onSKUSearch(v,'SKUDataSourceObjects')"
>
<a-select-option v-for="shangpin in SKUDataSourceObjects" :key="shangpin.商品编码" :dataitem="shangpin" >
{{shangpin.商品编码}}
</a-select-option>
</a-select>
</td>
<td>
{{record.ProductName}}
</td>
</tr>
</template>
晕倒跑了一圈 又回来了. … 去掉this.即可. 同样的 . $set() 其它的都可以不要this.
加了反而不对. 匿名函数的形式, 里面就不需要 this.