Добавлении новой строки Vue.js и вставка индекса (номера строки) по умолчанию?

Question

[Dauren S]

<div id="app">
  <h1>Add user</h1>
  <div v-for="(user, index) in users">
    <select v-model="user.name">
      <option value="">Выбрать</option>
      <option v-for="o in getOptions(index)" :value="o.value" v-text="o.label"></option>
    </select>
    <input v-model="user.procent">

    <button @click="deleteUser(index)">
      delete
    </button>
  </div>

  <button @click="addUser" :disabled="users.length >= options.length">
    New User
  </button>

  <pre>{{ users }}</pre>
  <pre>{{ percentTotal }}</pre>
</div>

new Vue({
  el: '#app',
  data: {
    users: [{ name: '', procent: '' }],
    options: [
      { label: 'Иванов', value: 'ivanov' },
      { label: 'Петров', value: 'petrov' },
      { label: 'Титарев', value: 'titarev' },
    ]
  },
  methods: {
    getOptions(index) {
      return this.options.filter(o => this.users.every((u, i) => u.name !== o.value || i === index));
    },
    addUser() {
      this.users.push({ name: '',procent:'' });
    },
    deleteUser(index) {
      this.users.splice(index, 1);
      if (this.users.length === 0) {
        this.addUser();
      }
    },
  },
  computed: {
    percentTotal() {
      return this.users.reduce((acc, user) => acc + parseInt(user.procent, 10), 0)
    },
 	},
});

Как при добавлении новой строки в input по умолчанию вставлять номер индекса?

Answer 1

[Сергей delphinpro]

addUser() {
    this.users.push({
        name: '',
        procent: this.users.length,
    });
},

Comments

[Dauren S]

Не подскажете как для input еще добавлять класс (datepicker)?

Answer 2

[grinat]

Например открыть гугл, узнать что push возвращает новую длину массива, вычесть оттуда единицу и хоба, у тебя есть то шо нужно.