Question

我有一个希望用户编辑的JSON对象。

当我像{{json}}一样打印时，我得到了字符串{"car":{"color":"blue"}}。但是当我在任何类型的可编辑字段中打印它时，例如

<input v-model="json">

我明白了：

我尝试过的事情：

html:v-model / html:value-空输入
<textarea v-model="json">{{json}}</textarea>-我得到[object Object]，但是当我检查元素时，我看到JSON像字符串一样打印-这就是我想要的！

如何获取v-model以在输入中将JSON打印为字符串？

Answer 1

您始终可以使用JSON.stringify(someObject)来获取对象的字符串化版本，但是不能通过v-model来绑定它。

如果我对您的理解正确，您实际上确实希望用户编辑字符串化的json而不提供对象属性的输入字段吗？（后者将是一种更清洁的解决方案，尽管可以通过v-for="(value, key) in object"轻松实现）

但是如果是这种情况，您还必须考虑当用户输入无效的json时该怎么做。

为此，我的方法是使用对象的字符串化版本绑定到文本区域v-model和watch，以确定在任何更改时它是否是有效且可解析的json格式。 / p>

此处的工作示例：https://codesandbox.io/s/ol9nn9j566
它可能需要进行一些反跳处理和更好的错误处理，但它应该可以帮助您入门。