Блог

Я пытаюсь использовать эту библиотеку https://github.com/vueform/multiselect , но всякий раз, когда я пытаюсь загрузить извлеченные данные, там ничего не отображается, но, например, когда я это делаю {{ testData }} , я вижу значение в html. Кто-нибудь может посоветовать мне, как я могу это исправить?

Работает: <Multiselect :options="['test']" />

Не работает:

 <Multiselect :options="testData" />
 

в моей настройке()

   const testData = computed(() => {
      return [
        {
          name: "Test"
        }
      ]
    })

return { testData }
 

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

  const testData = computed(() => {
      return [{ name: "Test"}]
    })

return { testData }
 

и добавьте следующие изменения в шаблон

 <Multiselect :options="testData" track-by="name" label="name"/>
 

Изменено по запросу:

Если вы хотите показать весь объект целиком, вы можете следовать приведенному ниже примеру

  const testData = computed(() => {
      return [
        { name: 'Vue.js', id: 'vue' },
        { name: 'Angular', id: 'angular' }
      ]
 })

return { testData }
 

и добавьте метод, вызываемый nameWithId с нижеприведенным содержимым.
Примечание: я дал его на основе синтаксиса Vue2, пожалуйста, измените синтаксис, соответствующий Vue3

 nameWithId({ name, id }) {
      return `${name} — [${id}]`
    }
 

затем с приведенными ниже изменениями в вашем шаблоне

 <Multiselect v-model="selectedValue" :options="testData" :custom-label="nameWithId" placeholder="Select one" label="name" track-by="name"/>
 

Справочный документ: https://vue-multiselect.js.org/#sub-getting-started