CODEWITHSUNDEEP
javascriptvue.jsvuejs2
masterofnothing
masterofnothing

Reputation: 43

vue.esm.js:649 [Vue warn]: Error in nextTick: "TypeError: Cannot convert object to primitive value" vue

I'm getting the following warning [Vue warn]: Error in nextTick: "TypeError: Cannot convert object to primitive value" followed by an error TypeError: Cannot convert object to primitive value.

This happens upon setting an object in the store. The data is set in the store correctly, the problem appear to be happening in the renderization of the page after the nextTick is happening.

The console log for the error shows:

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)

On the file vue.esm.js:6811 I get the following:

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

I wish I could give more details to this question but I don't have any idea where or why this error is happening directly on my code. I have two pages using the same service, one render it correctly and the other happens this error. I have looked and made sure that both pages are exactly the same but this only happens in one

Upvotes: 1

Views: 1509

Answers (3)

碳60
碳60

Reputation: 173

The reason is this: when parent component pass a prop to child component, and when child component did not receive the prop by registering prop filed, vue will think call prop.toString and put the value to the child's DOM element.

sth like this:

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

and if the sort prop does have toString method, it will throw the Error you encoutered.

eg:

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

Upvotes: 0

George Wayne
George Wayne

Reputation: 191

I also encountered the same problem. Although I don’t know what caused the problem, I can use JSON.parse(JSON.stringify(***)) to solved

Upvotes: 0

masterofnothing
masterofnothing

Reputation: 43

The answer will seem something extremely stupid but if anyone has an answer on why this happens I will gladly accept the answer.

The problem happens on this line of code on my implemented code:

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

The component order-summary doesn't have a prop sort. Upon removing of the prop sort everything works correctly.

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

If anyone would have an explanation on why this happens I would gladly accept the answer

Upvotes: 1

Related Questions