element-ui,select组件远程搜索时this指向有问题,麻烦各位帮忙看下

Question

第一次搜索是数据能正常渲染,第二次this指向就有问题了

我试过定义一个变量把this付给这个变量,但还是不行

<el-select
          v-model="seller"
          filterable
          remote
          reserve-keyword
          placeholder="请输入商家名称"
          :remote-method="sellerList"
          :loading="seller.loading">
          <el-option
            v-for="item in seller.list"
            :key="item.id"
            :label="item.account"
            :value="item.id">
          </el-option>
        </el-select>
<script>
  var that;
  export default {
    data () {
      return {
        seller:{
          list:[],
          newlist:[],
          loading: false
        }
      }
    },
    beforeCreate(){
      that = this;
    },
    mounted() {

    },
    methods: {
      
      //查询商家
      sellerList(name){
        that.seller.loading = true
        this.$http({
          url: this.$http.adornUrl(`/shop/seller/all`),
          method: 'get'
        }).then(({data}) => {
          that.seller.loading = false
          if (data && data.code === 0) {
            that.seller.list = data.list
          } else {
            that.seller.list = []
            this.$message.error(data.msg)
          }
        })
      }
    }
  }

麻烦帮忙看下有什么办法可以解决这个问题

Answer 1

直接把sellerList里面that全改成this即可，这个组件的上下文并没有会改变sellerList这个method中this指向的调用，你的$http也用箭头函数固定作用域了，根本没必要做缓存