Динамическая форма в Vue JS

Question

Я получаю список полей для заполнения, вывожу их пользователю как форму.

        <form @submit.prevent="submitAddData">
            <table>
                <tr v-for="(value,key) in values">
                    <td><label :for="key">{{ key}}</label></td>
                    <td><input type="text" v-id="key" :value="value"></td>
                </tr>

            </table>
            <button type="submit">Submit2</button>
        </form>

И хочу их отправить уже изменённым на сервер. Такой вариант не работает.

       submitAddData() {
            var vm = this;
            axios.post('http://кого-чего', vm.values)
                .then(response => {
                   vm.otvet = response.data.documents
                }).catch(error => {
                   vm.errors = error.response.data.errors,
                   console.log(error.response.data)});
        }

Много гуглил, пытался прикрутить Vue.set Все тщетно. Пните куда смотреть)

Answer 1

Вот так

Vue.component('super-form-element', {
  props: ['el'],
  template: `
  <fieldset>
    <legend>{{el.name}}</legend>
    <input type="text" v-model="el.value">
  </fieldset>`,
})

var app = new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          name: 'name1',
          value: 'value1'
        },
        {
          name: 'name2',
          value: 'value2'
        },
        {
          name: 'name3',
          value: 'value3'
        },
        {
          name: 'name4',
          value: 'value4'
        },
      ],
    }
  },
  methods: {
    submitAddData() {
      console.log(this.items);
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <form @submit.prevent="submitAddData">
    <super-form-element
      v-for="(el, index) in items"
      :key="index"
      :el="el"
    ></super-form-element>
    <button type="submit"> Send </button>
  </form>
</div>

БЛОГ НА HUSL

Динамическая форма в Vue JS

Ответы (1 шт):