iPhone UITableView с UISearchBar и обновляющий Индекс Раздела

track-by Использование

Документы указывают, что track-by «Используется для сравнения объектов. Используйте только если опции являются объектами. »

То есть он определяет ключ объекта, который будет использоваться при сравнении значений объекта в options. Документы должны фактически указывать, что track-by требуется , когда опции являются объектами , потому что использует track-by , чтобы определить, какие опции в выпадающем списке выбраны и для правильно удалить выбранную опцию из мультиселекции .

Без track-by вы бы увидели два ошибочных поведения для опций объекта: (1) пользователь мог бы повторно выбрать уже выбранные опции, и (2) попытка удалить выбранные опции вместо этого вызвала бы все опции быть вставленным заново.

Установка начальных значений

не поддерживает автоматический перевод массива значений, но вы можете легко сделать это из родительского компонента.

1. Создать локальное свойство данных, чтобы указать track-by и начальные значения множественного выбора (например, с именами trackBy и initialValues соответственно):

   export default {
     data() {
       return {
         //...
         trackBy: 'id',
         initialValues: [2, 5],
       }
     }
   }
   

2. Свяжите .track-by с this.trackBy и .v-model с this.value:

3. Создайте наблюдателя на this.initialValues, который отображает эти значения в массив объектов основаны на this.trackBy, устанавливая this.value в результат:

   export default {
     watch: {
       initialValues: {
         immediate: true,
         handler(values) {
           this.value = this.options.filter(x => values.includes(x[this.trackBy]));
         }
       }
     }
   }
   

Vue.component('v-multiselect', window.VueMultiselect.default);

new Vue({
  el: '#app',
  data () {
    return {
      trackBy: 'id',
      initialValues: [5,2],
      value: null,
      options: [
        { id: 1, name: 'Vue.js', language: 'JavaScript' },
        { id: 2, name: 'Rails', language: 'Ruby' },
        { id: 3, name: 'Sinatra', language: 'Ruby' },
        { id: 4, name: 'Laravel', language: 'PHP' },
        { id: 5, name: 'Phoenix', language: 'Elixir' }
      ]
    }
  },
  watch: {
    initialValues: {
      immediate: true,
      handler(values) {
        this.value = this.options.filter(x => values.includes(x[this.trackBy]));
      }
    }
  }
})

  
  
  
{{ value }}