Vue中 匿名函数直接执行$forceUpdate()更新.

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.