Vue: O valor vazio da propriedade faz com que a compilação do modelo falhe

Criado em 18 out. 2016 · 3Comentários · Fonte: vuejs/vue

Versão Vue.js

2.0.3

Link de reprodução

Passos para reproduzir

Vincule um prop que tenha uma string vazia como valor. Se você fornecesse um objeto JSON ou a string null , funcionaria, mas se você usar uma string vazia, o modelo não será compilado.

Não tenho certeza se esse é o comportamento esperado no Vue 2 (costumava funcionar no Vue 1). No entanto, parece um pouco contra-intuitivo. Por exemplo, se estou fornecendo conteúdo como um servidor prop, preciso verificar se ele existe e retornar a string literal null caso contrário.

O que é esperado?

O aplicativo ainda é renderizado, mas a propriedade se torna uma string vazia ou nula.

O que realmente está acontecendo?

Um aviso é mostrado no console e o aplicativo falha na renderização.

[Vue warn]: failed to compile template:

<review :review=""></review>

(found in root instance)

Fonte

dwightwatson

👍4

Comentários muito úteis

@fnlctrl
Como você faria isso com os adereços do Number?

pxwee5 em 15 abr. 2018

👍5

Todos 3 comentários

Oi, obrigado por preencher este problema.

se você usar uma string vazia, o modelo não será compilado.

Você não está definindo uma string vazia com <review :review=""></review> .
A maneira correta é: <review :review="''"></review> . Lembre-se de que v-bind espera expressões javascript. https://jsfiddle.net/fnlCtrl/jt3hjuwg/1/

Por exemplo, se estou fornecendo conteúdo como um servidor de prop, preciso verificar se ele existe e retornar a string literal null caso contrário.

Você só precisa dar a ele uma string vazia '' , isso é tudo.

fnlctrl em 18 out. 2016

👍3

Não existe uma maneira melhor para a Vue lidar com isso? Ou é possível fornecer algum tipo melhor de tratamento de erros em vez de despejar metade do DOM dentro do console quando isso acontecer?