即使未渲染组件，Vue.js也会出错

Question

我有一个组件，只有在有数据要显示时才会呈现。

<v-row v-if="openPositions.length !== 0" justify="center" align="end" class="mt-1">

这很好用。

但是，即使未渲染此组件，也会打印错误消息，因为此组件中未定义某些数据，但这就是我一开始不显示表格的原因。

如何停止这些错误消息？

===== 编辑 =====

您可以在下面看到完整的组件代码，下面是来自控制台的错误。

<template>
  <v-row v-if="openPositions.length" justify="center" align="end" class="mt-1">
    <v-col sm="12">
      <v-data-table
      
        v-if="this.full"
        dense
        align="center"
        :headers="headers_full"
        :items="openPositions"
        hide-default-footer
      >
        <template v-slot:item.symbol="{ item }">
          <span>{{ item.symbol }}</span>
        </template>
        <template v-slot:item.size="{ item }">
          <span v-if="item.side === 'sell'" class="error--text">{{
            item.size
          }}</span>

          <span v-if="item.side === 'buy'" class="success--text">{{
            item.size
          }}</span>
        </template>

        <template v-slot:item.position_value="{ item }">
          <span>
            {{ item.position_value.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.entry_price="{ item }">
          <span>
            {{ item.entry_price.toFixed(2) }}
          </span>
        </template>

        <template v-slot:item.liq_price="{ item }">
          <span>
            {{ item.liq_price.toFixed(2) }}
          </span>
        </template>

        <template v-slot:item.position_margin="{ item }">
          <span>
            {{ item.position_margin.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.unrealised_pnl_last="{ item }">
          <span v-if="item.unrealised_pnl_last < 0" class="error--text">
            {{ item.unrealised_pnl_last.toFixed(6) }}
          </span>
          <span v-else-if="item.unrealised_pnl_last > 0" class="success--text">
            {{ item.unrealised_pnl_last.toFixed(6) }}
          </span>
          <span v-else>
            {{ item.unrealised_pnl_last.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.realised_pnl="{ item }">
          <span v-if="item.realised_pnl < 0" class="error--text">
            {{ item.realised_pnl.toFixed(6) }}
          </span>
          <span v-else-if="item.realised_pnl > 0" class="success--text">
            {{ item.realised_pnl.toFixed(6) }}
          </span>
          <span v-else>
            {{ item.realised_pnl.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.daily_total="{ item }">
          <span v-if="item.daily_total < 0" class="error--text">
            {{ item.daily_total.toFixed(6) }}
          </span>
          <span v-else-if="item.daily_total > 0" class="success--text">
            {{ item.daily_total.toFixed(6) }}
          </span>
          <span v-else>
            {{ item.daily_total.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.market_close="{ item }">
          <v-btn x-small color="primary" @click="marketClose(item)">
            Close
          </v-btn>
        </template>
      </v-data-table>
      <v-data-table
        v-else
        dense
        align="center"
        :headers="headers_reduced"
        :items="openPositions"
        hide-default-footer
      >
        <template v-slot:item.symbol="{ item }">
          <span>{{ item.symbol }}</span>
        </template>
        <template v-slot:item.size="{ item }">
          <span v-if="item.side === 'sell'" class="error--text">{{
            item.size
          }}</span>

          <span v-if="item.side === 'buy'" class="success--text">{{
            item.size
          }}</span>
        </template>

        <template v-slot:item.position_value="{ item }">
          <span>
            {{ item.position_value.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.entry_price="{ item }">
          <span>
            {{ item.entry_price.toFixed(2) }}
          </span>
        </template>

        <template v-slot:item.liq_price="{ item }">
          <span>
            {{ item.liq_price.toFixed(2) }}
          </span>
        </template>

        <template v-slot:item.position_margin="{ item }">
          <span>
            {{ item.position_margin.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.unrealised_pnl_last="{ item }">
          <span v-if="item.unrealised_pnl_last < 0" class="error--text">
            {{ item.unrealised_pnl_last.toFixed(6) }}
          </span>
          <span v-else-if="item.unrealised_pnl_last > 0" class="success--text">
            {{ item.unrealised_pnl_last.toFixed(6) }}
          </span>
          <span v-else>
            {{ item.unrealised_pnl_last.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.realised_pnl="{ item }">
          <span v-if="item.realised_pnl < 0" class="error--text">
            {{ item.realised_pnl.toFixed(6) }}
          </span>
          <span v-else-if="item.realised_pnl > 0" class="success--text">
            {{ item.realised_pnl.toFixed(6) }}
          </span>
          <span v-else>
            {{ item.realised_pnl.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.daily_total="{ item }">
          <span v-if="item.daily_total < 0" class="error--text">
            {{ item.daily_total.toFixed(6) }}
          </span>
          <span v-else-if="item.daily_total > 0" class="success--text">
            {{ item.daily_total.toFixed(6) }}
          </span>
          <span v-else>
            {{ item.daily_total.toFixed(6) }}
          </span>
        </template>

        <template v-slot:item.market_close="{ item }">
          <v-btn x-small color="primary" @click="marketClose(item)">
            Close
          </v-btn>
        </template>
      </v-data-table>
    </v-col>
  </v-row>
</template>

<script>
import store from "../store";
export default {
  store,
  name: "OpenPositions",
  components: {},
  props: [],
  data() {
    return {
      dialog: false,
      headers_full: [
        { text: "Open Position", value: "symbol" },
        { text: "Qty", value: "size" },
        { text: "Value", value: "position_value" },
        { text: "Price", value: "entry_price" },
        { text: "Liq. Price", value: "liq_price" },
        { text: "Margin", value: "position_margin" },
        { text: "Leverage", value: "leverage" },
        {
          text: "Unrealized P&L",
          value: "unrealised_pnl_last",
        },
        { text: "Daily Realized P&L", value: "realised_pnl" },
        { text: "Daily Total (% of Account)", value: "daily_total" },
        { text: "SL", value: "stop_loss" },
        { text: "TP", value: "take_profit" },
        { text: "TS", value: "trailing_stop" },
        { text: "Stops", value: "trading_stops" },
        { text: "Market close", value: "market_close" },
      ],
      headers_reduced: [
        { text: "Open Position", value: "symbol" },
        { text: "Qty", value: "size" },
        { text: "Value", value: "position_value" },
        { text: "Price", value: "entry_price" },
        { text: "Liq. Price", value: "liq_price" },
        { text: "Margin", value: "position_margin" },
        { text: "Leverage", value: "leverage" },
        {
          text: "Unrealized P&L",
          value: "unrealised_pnl_last",
        },
        { text: "Daily Realized P&L", value: "realised_pnl" },
        { text: "Daily Total (% of Account)", value: "daily_total" },
        { text: "Market close", value: "market_close" },
      ],
    };
  },
  methods: {
    async marketClose(item) {
      await this.$apiAbstraction.marketOrder(
        item.symbol,
        item.side === "buy" ? "sell" : "buy",
        Math.abs(item.size)
      );
    },
  },
  computed: {
    openPositions() {
      return store.getters.getOpenPositionsByExchange(
        store.getters.getExchange
      );
    },
    full() {
      return store.getters.getExchange !== "deribit";
    },
  },
  mounted() {},
};
</script>

<style scoped></style>

错误：

[Vue warn]: Error in render: "TypeError: item.position_value.toFixed is not a function"

found in

---> <VData>
       <VDataTable>
         <OpenPositions> at src/components/OpenPositions.vue
           <Ladder> at src/views/Ladder.vue
             <VMain>
               <VApp>
                 <App> at src/App.vue
                   <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3550
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
setOpenPositions @ exchanges.js?d86e:169
wrappedMutationHandler @ vuex.esm.js?2f62:840
commitIterator @ vuex.esm.js?2f62:462
eval @ vuex.esm.js?2f62:461
_withCommit @ vuex.esm.js?2f62:620
commit @ vuex.esm.js?2f62:460
boundCommit @ vuex.esm.js?2f62:405
handleOnMessage @ deribitApi.js?89c3:141
_this.ws.onmessage @ deribitApi.js?89c3:59
ReconnectingWebSocket._handleMessage @ reconnecting-websocket-mjs.js?d096:172
vue.runtime.esm.js?2b0e:1888 TypeError: item.position_value.toFixed is not a function
    at fn (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7c63af54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/OpenPositions.vue?vue&type=template&id=3ad75d40&scoped=true& (app.js:1010), <anonymous>:279:64)
    at normalized (vue.runtime.esm.js?2b0e:2590)
    at eval (Row.ts?6e51:31)
    at Array.map (<anonymous>)
    at render (Row.ts?6e51:22)
    at createFunctionalComponent (vue.runtime.esm.js?2b0e:3058)
    at createComponent (vue.runtime.esm.js?2b0e:3231)
    at _createElement (vue.runtime.esm.js?2b0e:3434)
    at createElement (vue.runtime.esm.js?2b0e:3353)
    at VueComponent.vm.$createElement (vue.runtime.esm.js?2b0e:3494)

Answer 1

编辑（看到实际错误后）：

问题是你试图在不是数字的东西上使用.toFixed。为了防止它，您必须将值包装在 Number 中。

Number(item.daily_total || 0).toFixed(6)

此外，您的item.daily-total 模板槽可以显着简化为：

<template v-slot:item.daily_total="{ value }">
  <span :class="{ 'error--text': value < 0, 'success--text': value > 0 }"
        v-text="Number(value || 0).toFixed(6)" />
</template>

显然，您也应该对其他模板使用类似的方法。

因为你在不止一个地方使用它，你可以干掉你的代码并使用一个 Vue 组件来应用成功/错误类：

<template>
  <span :class="cellClass"
         v-text="Number(value || 0).toFixed(toFixed || 2)" />
</template>
<script>
  export default Vue.extend({
    name: 'CellValue',
    props: ['value', 'item', 'header', 'toFixed'],
    computed: {
      cellClass() {
        return {
          'error--text': this.value < 0,
          'success--text': this.value > 0
        }
      }
    }
  })
</script>

...将其作为 Vue 组件导入并在表格模板中使用：

<template v-slot:item.daily_total="cell">
  <cell-value v-bind="cell" :to-fixed="6" />
</template>

您无需将 item 或 header 声明为 props，但它们由 Vuetify 插槽提供，以备不时之需。
注意我还添加了一个额外的prop，称为to-fixed，默认为2，它决定了小数位数。您可以将其重命名为 decimals。
另请注意，我将value 默认为0，以避免在非number 类型的任何内容上使用.toFixed() 时出现任何错误。
例如，如果您希望在值属于 number 以外的任何其他类型时显示自定义文本，则可以在 CellValue 的模板中使用更详细的内容：

<template>
  <span :class="cellClass">
    <template v-if="typeof value === 'number'">
      {{ value.toFixed(toFixed || 2) }}
    </template>
    <template v-else>
      <code>{{ value || '--' }}</code>
    </template>
  </span>
</template>

---

作为参考，我将最初的答案留在这里，因为它可能对其他人有所帮助：

当您的模板依赖于在某些情况下由于尝试访问undefined 实体的属性/方法而出错的表达式时，最简单的解决方法是创建一个避免异常的computed 属性：

<template>:

<v-row v-if="hasOpenPositions" justify="center" align="end" class="mt-1">

<script>:

computed: {
  hasOpenPositions() {
    return this.openPositions && this.openPositions.length !== 0;
  }
}

但是，请注意，当openPositions 是真实的并且它没有length 属性时（当它的length 是undefined 时，上述计算将返回true；即：openPositions: {} - 因为undefined !== 0)。

我发现自己使用的另一种略短的语法是：

computed: {
  hasOpenPositions() {
    return !!(this.openPositions?.length);
  }
}

（只有当openPositions 有一个真实的length 时，这个才返回true，这可能是你想要的）。

请注意optional chaining (?.) 在<template> 中不起作用，至少目前如此。

---

以上是一个通用的解决方法，它对深层对象很方便，因此当对象尚未被填充/加载时，您的模板不会出错。

但是，如果 openPositions 是一个数组，您应该将其实例化为一个空数组并将您的检查简化为：

<template>:

<v-row v-if="openPositions.length" justify="center" align="end" class="mt-1">

<script>:

data: () => ({
  openPositions: []
}),
mounted() {
  this.$http.get('some/api').then(r => { this.openPositions = r.data })
}

这里的相关位是 openPositions 始终是一个数组（所以它总是有一个 length 内部方法）并且它是反应性的。您如何更新它（mounted 或某种方法）无关紧要。