小编Mah*_*ngh的帖子

我正在使用 element-ui 和 vuejs。我有一个看起来像这样的选择元素

<el-form-item label="City" prop="city">
     <el-select 
            v-model="form.city" 
            multiple 
            filterable
            remote
            auto-complete = "address-level2"
            no-match-text = "No data found"
            :remote-method = "remoteMethod"
            :loading = "loading"
            placeholder="Select City">
          <el-option
            v-for = "(item,index) in cities"
            :key = "index"
            :label = "item.name"
            :value = "item.key"
          ></el-option>
     </el-select>
</el-form-item>

现在我想在用户选择一个选项后触发这个选择的模糊事件，以便下拉选项折叠。

这是我的远程方法

remoteMethod: _.throttle(function(query) {
        this.loading = true;
        axios({
            method: 'get',
            url: someUrl
        }).then(response =>{
            if(response.data.status === false){
                this.$notify.error({
                    title: 'Error',
                    message: response.data.message
                });
            }
            else if(response.data.status === true && response.data.data.length != 0){
                this.loading …

这是我只进行服务器端渲染（不引导客户端）时得到的结果。这意味着无法与所提供的页面进行交互，因为浏览器上不会发生 js 执行。

First Contentful Paint: 0.6 s First Meaningful Paint: 0.6 s Speed Index: 0.6 s First CPU Idle: 1.5 s Time to Interactive: 1.7 s Max Potential First Input Delay:140 ms

总分：99

这是我在使用 Angular 通用和预引导（服务器端渲染 + 客户端渲染）进行渲染时得到的结果。页面是完全互动的。

First Contentful Paint: 0.6 s First Meaningful Paint: 0.6 s Speed Index: 2.5 s First CPU Idle: 2.6 s Time to Interactive: 3.3 s Max Potential First Input Delay:160 ms

总分：75

很明显，当我尝试在客户端执行 javascript 时，Speed Index、First CPU Idle 和 Time to Interactive …