Выпадающий список vue

Question

Подскажите, как сделать выпадающий список 1-30, где можно будет выбрать порядковый номер? Не понимаю,что для этого нужно, подключить массив от 1 до 30 или как это вообще сделать?

                    <label>Порядок рассмотрения</label>
                    <select class="form" v-model="sort">
                      <option
                        v-for="item in sort"
                        v-bind:key="item.[]"
                        v-bind:value="item.[]"
                        v-text="item[]"
                      ></option>
                    </select>

Answer 1

Вообще просто вывести список можно и без создания каких-либо данных:

new Vue({
  el: '#app',
  data() {
    return {
      sort: null,
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select class="form" v-model="sort">
    <option v-for="item in 30" v-bind:key="item" v-bind:value="item" v-text="`Запись ${item}`"></option>
  </select>
  <!-- и порядковый номер можно получить -->
  {{ sort }}
</div>

Но я думаю вам вероятно этого будет недостаточно, поэтому, вы можете использовать массив объектов, которые будут содержать все необходимые вам данные(в том числе и порядковый номер):

 items: [
   {
    id: 1,
    title: 'Item 1',
    sort: 1,
   },
   ...
 ],

По такому массиву объектов, вы можете построить список(<select>):

<select class="form" v-model="sort">
    <option
      v-for="item in items"
      v-bind:key="item.id"
      v-bind:value="item"
      v-text="item.title"
    ></option>
  </select>

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
        id: 1,
        title: 'Item 1',
        sort: 1,
      }, {
        id: 2,
        title: 'Item 2',
        sort: 2,
      }, ],
      sort: null,
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select class="form" v-model="sort">
    <option v-for="item in items" v-bind:key="item.id" v-bind:value="item" v-text="item.title"></option>
  </select>
</div>

Далее проводите манипуляции с записями массива объектов(в том числе и сортировку, создание, удаление), чтобы получить желаемый эффект от списка. Привожу небольшой пример:

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
        id: 1,
        title: 'Запись 1',
        sort: 1,
      }, ],
      sort: [],
      nextId: 2,
    }
  },
  computed: {
    listSortBySort() {
      return this.items.sort(function(a, b) {
        return a.sort - b.sort;
      })
    },
  },
  methods: {
    addItem() {
      this.$set(this.items, this.items.length, {
        id: this.nextId,
        title: `Запись ${this.nextId}`,
        sort: this.nextId
      })
      ++this.nextId
    },
    removeItem(key) {
      this.items.splice(key, 1)
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select class="form" v-model="sort" multiple>
    <option v-for="item in listSortBySort" v-bind:key="item.id" v-bind:value="item" v-text="item.title"></option>
  </select>
  <hr>
  <template v-for="(item, key) in items">
    title=<input v-model="items[key].title" type="text"/>
    sort=<input v-model="items[key].sort" type="number"/>
    
  <button @click="removeItem(key)">Удалить</button>
    <br/> 
  </template>
  <button @click="addItem">Добавить запись</button>
</div>

БЛОГ НА HUSL

Выпадающий список vue

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