vue.esm.js:649 [Vue 警告]：nextTick 中的錯誤：“TypeError：無法將 object 轉換為原始值”vue

Question

我收到以下警告[Vue warn]: Error in nextTick: "TypeError: Cannot convert object to primitive value"后跟錯誤TypeError: Cannot convert object to primitive value 。

在商店中設置 object 時會發生這種情況。 數據已正確設置在存儲中，問題似乎發生在nextTick發生后的頁面呈現中。

錯誤的控制台日志顯示：

at baseSetAttr (vue.esm.js:6811)
at setAttr (vue.esm.js:6786)
at Array.updateAttrs (vue.esm.js:6740)
at patchVnode (vue.esm.js:6312)
at updateChildren (vue.esm.js:6188)

在文件vue.esm.js:6811我得到以下信息：

function baseSetAttr(el, key, value) {
  if (isFalsyAttrValue(value)) {
    el.removeAttribute(key);
  } else {
    // #7138: IE10 & 11 fires input event when setting placeholder on
    // <textarea>... block the first input event and remove the blocker
    // immediately.

    /* istanbul ignore if */
    if (isIE && !isIE9 && el.tagName === 'TEXTAREA' && key === 'placeholder' && value !== '' && !el.__ieph) {
      var blocker = function (e) {
        e.stopImmediatePropagation();
        el.removeEventListener('input', blocker);
      };

      el.addEventListener('input', blocker); // $flow-disable-line

      el.__ieph = true;
      /* IE placeholder patched */
    }

    el.setAttribute(key, value); <--- The error happens here
  }
}

我希望我可以為這個問題提供更多詳細信息，但我不知道這個錯誤在哪里或為什么直接在我的代碼上發生。 我有兩個頁面使用相同的服務，一個正確呈現，另一個發生此錯誤。 我已經查看並確保兩個頁面完全相同，但這只發生在一個頁面中

Answer 1

答案似乎非常愚蠢，但如果有人對為什么會發生這種情況有答案，我會很樂意接受這個答案。

問題發生在我實現的代碼的這行代碼上：

<template #results="{ items, loading, sort, onSort, orderedHeaders, onColumnOrderChange }">
        <order-summary :sort="sort"/>

組件order-summary沒有 prop sort 。 刪除道具sort后，一切正常。

<template #results="{ items, loading, sort, onSort, orderedHeaders, onColumnOrderChange }">
        <order-summary/>

如果有人能解釋為什么會發生這種情況，我很樂意接受答案

Answer 2

我也遇到了同樣的問題。 雖然不知道是什么原因造成的，但是可以使用JSON.parse(JSON.stringify(***))來解決

Answer 3

原因是這樣的：當父組件傳遞一個 prop 給子組件時，當子組件通過注冊 prop 字段沒有收到該 prop 時，vue 會認為調用 prop.toString 並將值放到子組件的 DOM 元素中。

像這樣的某事：

<div sort="[object Object]"></div>

如果 sort 道具確實有 toString 方法，它會拋出你遇到的錯誤。

例如：

var a = Object.create(null);
var b = `${a}`, // TypeError: Cannot convert object to primitive value