Что заставляет Vue props равняться [object Object] в DOM?

Question

При проверке DOM для приложения Vue в консоли Chrome я заметил элемент с атрибутом content=[object Object].В коде это потому, что этот компонент передавал объект как content реквизит своему дочернему элементу, и по какой-то причине это обнаруживалось в DOM.

Компонент, о котором идет речь: <custom-component :content="obj" />

Я проверил другие области кода, которые также передают объектные реквизиты своим детям, и заметил, что эти реквизиты отсутствовали в DOM.К сожалению, я не смог найти каких-либо существенных различий, которые могли бы быть причиной несоответствия.Так как я пытаюсь также скрыть content=[object Object] от DOM, мне было интересно, что в Vue определяет это поведение?

Я пытался воспроизвести поведение в этом jsfiddle .Однако из-за моего вопроса я не могу понять, как это правильно сделать, и пропеллер content отсутствует в DOM.Любая помощь будет принята с благодарностью.

Answer 1

Скорее всего, это потому, что вы не определили его как опору для соответствующего компонента. Если он не определен как реквизит, он будет просто преобразован в строку и добавлен в качестве атрибута к самому внешнему элементу компонента.

Если ваш компонент действительно определяет этот объект, проверьте его шаблон, чтобы увидеть, добавляет ли он этот атрибут к самому внешнему элементу. Если он вызывает какой-то другой компонент в корне шаблона, вам также необходимо проверить, определяет ли этот компонент этот объект.