Создания обьекта через интпуты и вывод обьекта на страницу

Question

Создания обьекта через интпуты и вывод его на страницу

<div class="form-group">
    <label for="userId">userId</label>
    <input type="text" id="userId" v-model.trim="userId">
  </div>
  <div class="form-group">
    <label for="id">id</label>
    <input type="text" id="id" v-model.number="id">
  </div>
  <div class="form-group">
    <label for="title">title</label>
    <input type="text" id="title" v-model.number="title">
  </div>
  <div class="form-group">
    <label for="body">body</label>
    <input type="text" id="body" v-model.number="body">
  </div>

  <button @click="create">Create</button>
  <ul>
    <li></li>
  </ul>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Answer 1

Например так:

new Vue({
  el: '#app',
  data: {
    userId: '',
    id: '',
    title: '',
    body: '',
    myUsers: []
  },
  methods: {
    create() {
      const {userId, id, title, body} = this.$data;
      this.myUsers.push({
        userId,
        id,
        title,
        body
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <div class="form-group">
    <label for="userId">userId</label>
    <input type="text" id="userId" v-model.trim="userId">
  </div>
  <div class="form-group">
    <label for="id">id</label>
    <input type="text" id="id" v-model.number="id">
  </div>
  <div class="form-group">
    <label for="title">title</label>
    <input type="text" id="title" v-model.number="title">
  </div>
  <div class="form-group">
    <label for="body">body</label>
    <input type="text" id="body" v-model.number="body">
  </div>

  <button @click="create">Create</button>
  <ul>
    <li :key="user.id" v-for="user in myUsers">{{user}}</li>
  </ul>
</div>

БЛОГ НА HUSL

Создания обьекта через интпуты и вывод обьекта на страницу

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