Svelte Multiselect

Photo by Ferenc Almasi on Unsplash

Ambil data dari Controller

$: author = author;

Data state untuk komponen

let ui_libs = author; // Format data object
// author = [
//  {
//    label: 'nama',
//    value: 1
//  },
//  {
//    label: 'dua',
//    value: 2
//  },
];
let selected = [];

// State data form
let formInputpost = {
        id: "",
        title: "",
        call_nummber_book: "",
        id_classification: "",
        id_publisher: "",
        id_collection: "",
        id_language: "",
        id_location: "",
        id_author: [],
        id_topic: "",
        id_type: "",
        isbn: "",
        year_publish: "",
        physical_description: "",
        description_books: "",
        synopsis_books: "",
        sum_page: "",
        status: "",
        id_agent: "",
        qty: "",
};

Component Multiselect

<MultiSelect 
         --sms-padding="8pt"
         bind:selected 
         options={ui_libs} 
         allowUserOptions={false}
         createOptionMsg={null}
         on:add={(e) => {
            formInputpost.id_author.push(e.detail.option.value)
            console.log(formInputpost.id_author);
         }}
         on:remove={(e) => {
            let data = formInputpost.id_author.filter(item => item !== e.detail.option.value)
            formInputpost.id_author = data;
            console.log(formInputpost.id_author);
         }}
                                
  />