v-модель печатает [объектный объект] вместо строки JSON

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-модель печатать JSON в виде строкиво входе?

Answer 1

Вы всегда можете использовать JSON.stringify(someObject) для получения строковой версии объекта, однако вы не можете связать это с помощью v-model.

Если я вас правильно понимаю, вы действительно хотите, чтобы пользователь редактировал строковый json, а не предоставлял поля ввода для свойств объекта? (Последнее было бы гораздо более чистым решением и могло бы быть легко достигнуто с помощью v-for="(value, key) in object")

Но если это так, вы также должны подумать, что делать, когда пользователь вводит недопустимый json.

Мой подход к этому заключался бы в использовании строковой версии объекта для привязки к текстовой области v-model и watch, чтобы определить при любом изменении, является ли это допустимым и доступным форматом json.

Рабочий пример здесь: https://codesandbox.io/s/ol9nn9j566
Вероятно, потребуется некоторый анализ и лучшая обработка ошибок, но это поможет вам начать.