1

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

<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>

2
  • А в чём вопрос? И куда выводить?
    – Denis640Kb
    20 фев 2020 в 22:04
  • выводить в html список обьектов 21 фев 2020 в 6:19

1 ответ 1

2

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.