There is a problem with the this pointing when the element-ui,select component is searching remotely. Please take a look at it.

the first search is that the data can be rendered normally, but there is a problem with the second this pointing

I have tried to define a variable and pay this to this variable, but it still doesn"t work

<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)
          }
        })
      }
    }
  }

Please help me to see if there is any way to solve this problem


directly change that in sellerList to this . The context of this component does not change the call to this in sellerList , method . Your $http also uses the arrow function to fix the scope, so there is no need to cache

at all.
Menu