Блог

Я создаю SPA с помощью vue и firebase, и одно из представлений — это datatable с фильтром по данным в выпадающем списке.

Данные загружаются довольно медленно, поэтому я хочу, чтобы v-select заполнял значение по умолчанию (которое является идентификатором и именем фильтра), прежде чем запрос, возвращающий все параметры фильтров, разрешится.

Я пробовал несколько подходов, но я не понимаю, почему этот не работает. Каков правильный способ сделать это?

Примечание: важно, чтобы значение фильтра имело как имя, так и идентификатор, поскольку идентификатор управляет логикой фильтрации данных

 <template>
   <v-select 
      :items="items" 
      v-model="currentItem" 
      item-value="id" 
      item-text="name" 
      label="MySelector">
   </v-select>
   [...]
   <v-data-table> The data table elements are filtered using the value of v-select.</v-data-table>
</template>

<script>
   export default {
      props: {
         currentItem:{
            Array,
            default: () => {return {id:"rtegergergrg2r", name:"default-name"}
         },
      },

      computed:{
         items() { ... some slow query that returns a [{id:name}] }

         }
   }
</script>

  

Я также попытался вернуть значение по умолчанию в items . Это не работает, и v-select отображается как пустой при загрузке страницы (снимок экрана).

В этом случае не лучшая идея запускать запрос в вычисляемом свойстве. Я бы сделал это так:

 export default {
    props: {
        currentItem: { type: Array, default: () => { id: 'default-id', name: 'default-name' }
    },
    data () {
        return {
            items: [
                { id: 'default-id', name: 'default-name' }
            ]
        }
    },
    created () {
        this.items = // some slow query that returns a value
    }
}
  

Таким образом, вы уверены, что у вас будет некоторое значение по умолчанию, видимое в фильтре.

Кроме того, я немного обеспокоен использованием v-model с реквизитами. Это может привести к появлению предупреждения о прямом изменении реквизитов, а это никуда не годится.