[Vuejs]-Vue-multiselect update field using AJAX

0👍

Step 1: Create an HTML template

<div id="app">
  <multiselect
    v-model="selectedcategoryitem"
    :options="options"
    :multiple="true"
    :internal-search="false"
    group-values="libs"
    group-label="category"
    :group-select="true"
    placeholder="Type to search"
    track-by="value"
    label="name"
    @input="onChange"
  >
  </multiselect>
  <p>Selected Item: {{ selectedcategoryitem }}</p>
</div>

Step 2: Model data like,

data() {
  return {
    selectGoalID: 0,
    selectedcategoryitem: [],
    options: [
      {
        value: 1,
        category: "item1",
        libs: [
          { value: "1_1", name: "name1(E)" },
          { value: "1_2", name: "name2(P)" },
          { value: "1_3", name: "name3(T)" },
          { value: "1_4", name: "name4(F)" },
          { value: "1_5", name: "name5" },
        ],
      },
      {
        value: 2,
        category: "item2",
        libs: [
          { value: "2_1", name: "name1" },
          { value: "2_2", name: "name2" },
        ],
      },
      {
        value: 3,
        category: "item3",
        libs: [
          { value: "3_1", name: "name1" },
          { value: "3_2", name: "name2" },
          { value: "3_3", name: "name3" },
          { value: "3_4", name: "name4" },
          { value: "3_5", name: "name5" },
        ],
      },
    ],
  };
},

Step 3: Create an methods and call REST API call

methods: {
  UpdateType: function (goal_id, selectedTypes) {
    console.log("selectedTypes", selectedTypes);
    return $.ajax({
      method: "POST",
      url: "@Url.Action('UpdateType', 'Predict')",
      data: {
        _goal_id: goal_id,
        _selectedTypes: JSON.stringify(selectedTypes),
      },
      success: function (result) {
        alert(result);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.statusText);
      },
    });
  },
  onChange() {
    console.log("this.selectedcategoryitem", this.selectedcategoryitem);
    this.UpdateType(this.selectGoalID, this.selectedcategoryitem).then(
      function (result) {
        alert(result);
      },
      function () {
        alert("Error!!");
      }
    );
  },
},

You can see the logs for selected items and AJAX call form data
enter image description here
enter image description here

DEMO Link

Leave a comment