时间戳

首页 > 解决方案 > Vuetify 的 1.3 v-autocomplete computedMinWidth 问题

vuejs2 - Vuetify 的 1.3 v-autocomplete computedMinWidth 问题

问题描述

伙计们！

我在 Vuetify v1.2.3 中运行良好的应用程序中有一些自动完成功能。当我升级到 v1.3.3 时，它坏了。这是一个例子：

<v-autocomplete
  ref="obsBuscaContextualAC"
  v-if="opcoesBuscaContextual && opcoesBuscaContextual.length > 0"
  v-model="itemBusca"
  :loading="loadingStatusSearchOptions == 'LOADING'"
  :color="loadingStatusSearchOptions == 'ERROR' ? 'error' :
          (loadingStatusSearchOptions == 'LOADING' ? 'warning' : 'accent')"
  :items="opcoesBuscaContextual"
  label="Localidades"
  placeholder="Qual localidade você deseja analisar?"
  v-on:change="buscar"
  item-text="label"
  item-value="id"
  append-icon="search"
  class="mb-0 mt-2 screen-busca"
  outline hide-details return-object>
  <template slot="item" slot-scope="data">
    <template v-if="opcoesBuscaContextual.length < 2">
      <v-list-tile-content>
        <v-progress-circular :size="20" indeterminate color="primary">
        </v-progress-circular>
      </v-list-tile-content>
    </template>
    <template v-else>
      <v-list-tile-avatar>
        <v-icon>{{ data.item.icon }}</v-icon>
      </v-list-tile-avatar>
      <v-list-tile-content>
        <v-list-tile-title v-html="data.item.label"></v-list-tile-title>
        <v-list-tile-sub-title v-html="data.item.detail"></v-list-tile-sub-title>
      </v-list-tile-content>
    </template>
  </template>  
</v-autocomplete>

opcoesBuscaContextual是一个对象数组，由对 API 的异步调用（在create ()内部）填充。

我得到的错误是：

[Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined"

found in

---> <VMenu>
       <VAutocomplete>
         <VToolbar>
           <VApp>
             <App> at /Users/rmfagundes/Documents/Projetos/MPTDigital/OpenData/observatorio-trabalho-decente-vue/app/assets/App.vue
               <Root> warn @ vue.common.js:593 logError @ vue.common.js:1739 globalHandleError @ vue.common.js:1734 handleError @ vue.common.js:1723 Vue._render @ vue.common.js:4548 updateComponent @ vue.common.js:2790 get @ vue.common.js:3144 run @ vue.common.js:3221 flushSchedulerQueue @ vue.common.js:2983 (anonymous) @ vue.common.js:1839 flushCallbacks @ vue.common.js:1760 Promise.then (async) microTimerFunc @ vue.common.js:1808 nextTick @ vue.common.js:1852 queueWatcher @ vue.common.js:3070 update @ vue.common.js:3211 Vue.$forceUpdate @ vue.common.js:2693 (anonymous) @ index.js:233 (anonymous) @ index.js:231 (anonymous) @ index.js:116 (anonymous) @ BaseLandingView.vue:26 1253 @ BaseLandingView.vue:31
__webpack_require__ @ bootstrap 926e9f1242a0737ba051:712 hotApply @ bootstrap 926e9f1242a0737ba051:636 cb @ process-update.js:66 (anonymous) @ process-update.js:82 Promise.then (async) check @ process-update.js:81 module.exports @ process-update.js:42 processMessage @ client.js:268 handleMessage @ client.js:136 handleMessage @ client.js:99 vue.common.js:1743 TypeError: Cannot read property 'width' of undefined
    at VueComponent.calculatedMinWidth (vuetify.js:7508)
    at Watcher.get (vue.common.js:3144)
    at Watcher.evaluate (vue.common.js:3251)
    at VueComponent.computedGetter [as calculatedMinWidth] (vue.common.js:3509)
    at VueComponent.styles (vuetify.js:7519)
    at Watcher.get (vue.common.js:3144)
    at Watcher.evaluate (vue.common.js:3251)
    at VueComponent.computedGetter [as styles] (vue.common.js:3509)
    at VueComponent.genContent (vuetify.js:7791)
    at VueComponent.genTransition (vuetify.js:7756) logError @ vue.common.js:1743 globalHandleError @ vue.common.js:1734 handleError @ vue.common.js:1723 Vue._render @ vue.common.js:4548 updateComponent @ vue.common.js:2790 get @ vue.common.js:3144 run @ vue.common.js:3221 flushSchedulerQueue @ vue.common.js:2983 (anonymous) @ vue.common.js:1839 flushCallbacks @ vue.common.js:1760 Promise.then (async) microTimerFunc @ vue.common.js:1808 nextTick @ vue.common.js:1852 queueWatcher @ vue.common.js:3070 update @ vue.common.js:3211 Vue.$forceUpdate @ vue.common.js:2693 (anonymous) @ index.js:233 (anonymous) @ index.js:231 (anonymous) @ index.js:116 (anonymous) @ BaseLandingView.vue:26 1253 @ BaseLandingView.vue:31
__webpack_require__ @ bootstrap 926e9f1242a0737ba051:712 hotApply @ bootstrap 926e9f1242a0737ba051:636 cb @ process-update.js:66 (anonymous) @ process-update.js:82 Promise.then (async) check @ process-update.js:81 module.exports @ process-update.js:42 processMessage @ client.js:268 handleMessage @ client.js:136 handleMessage @ client.js:99

有任何想法吗？

提前致谢。

标签： vuejs2vuetify.js

解决方案

我找到了问题的根源。我在 data() 中使用了一个名为 dimensions 的属性，它覆盖了另一个同名的上下文属性，用于计算元素的大小。

推荐阅读