Я использую Nuxt JS v2.3.x для сайта по продаже недвижимости.Все основано на API и должно быть динамичным и простым в использовании как для разработчиков, так и для клиента.
По сути, в настоящее время я создаю бэкэнд (он немного похож на CMS / Wordpress), куда клиент может войти,добавьте и отредактируйте их свойства, которые затем появятся во внешнем интерфейсе.
В настоящее время мы модернизируем существующую систему, и поэтому некоторые вещи здесь могут отличаться.
IОднако я изо всех сил пытаюсь понять лучший подход к следующему:
В бэкэнде пользователь может получить доступ к списку своих свойств и редактировать свойство по следующему URL-адресу, например: https://mywebsite.com/property/1 (1идентификатор свойства и будет меняться в зависимости от свойства).
При загрузке этого представления у меня появляется нагрузка на входы, флажки и переключатели, каждая из которых автоматически заполняется значением соответствующей пары «ключ-значение», которая является запросом GET.из API.
Например: поле ввода имени свойства будет автоматически заполнено через значение attriОднако, используя API, пользователь может щелкнуть мышью в поле, чтобы отредактировать содержимое, а затем нажать «Сохранить, чтобы отправить эти данные обратно в API, чтобы сохранить их».
Моя проблема в том, что яизвлечение всех данных JSON через запрос GET, например, такой:
<script>
export default {
middleware: 'auth',
layout: 'dashboard',
data() {
return {
property: []
}
},
methods: {
submitForm () {
this.$http.post('https://eg.myCustomPropAPI.co.uk/property/IDHERE').then(response => {
this.property = response.body
}, response => {
// error callback
});
}
},
created() {
this.$http.get('https://eg.myCustomPropAPI.co.uk/property/IDHERE').then(response => {
this.property = response.body
}, response => {
// error callback
});
}
}
</script>
Данные JSON могут измениться и могут содержать X полей с разными типами ввода, поэтому имеет смысл динамически циклически повторять ивывод с использованием цикла v-for, например:
<form>
<div v-for="input in property.fields">
<input v-bind:type="input.type" v-bind:value="input.value" />
</div>
</form>
Значение должно быть установлено в поле, так как вы уже сохранили некоторые данные ранее, и он должен автоматическизаполните это поле.
ОСНОВНАЯ ПРОБЛЕМА:
Моя проблема в том, что я не уверен, как получить все значения в виде данных JSON для создания POSTзапросить, поскольку у меня нет v-model, и при добавлении одного мне потребуется каким-то образом динамически создавать переменные для хранения каждого из полей?
Есть ли способ, которым я могу просто получить все имена полей, потому чтоу них всех есть имя+ значение этого поля при отправке моей формы и связать его с методом отправки