Vue-multiselect update field using AJAX

Question

Here is my Vue multiselect component:

    <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"
                                     v-on:select="toggleSelected">
   <span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
</multiselect>

And data and method:

    data: {  selectGoalID: 0
           , selectedcategoryitem: []
           , queryData: []
           , 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' },
                        ]
                    },
            }
            , methods: {
                UpdateType: function (goal_id, selectedTypes) {
                    return $.ajax({
                        method: "POST"
                        , url: "@Url.Action("UpdateType", "Predict")"
                        , data: {
                            _goal_id: goal_id,
                            _selectedTypes: selectedTypes
                        }
                        , success: function (result) {
                            if (result.code == "S") {
                                
                            }
                            else {
                                alertResultModel(result);
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alertInfo(xhr.statusText);
                        }
                    });
                }
                
                , toggleSelected: function (value) {
                    if (value.length > 0) {
                        this.queryData = JSON.parse(JSON.stringify(value));
                    }                    
                    console.log(this.queryData);

                    this.UpdateType(this.selectGoalID, this.queryData).then(
                        function (result) {
                            if (result.code == "S") {
                                
                            }
                            else {
                                alertResultModel(result);
                            }
                        }
                        , function () {
                            alertError("Error!!");
                        }
                    );
                }
}

And when I selected single item, console log return: null,

When i selected multiple items console log return:

(2) [{…}, {…}, __ob__: Observer]
0: {__ob__: Observer}
1: {__ob__: Observer}
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
[[Prototype]]: Array

Question is:

Why first selected item is null, but v-model="selectedcategoryitem" selectedcategoryitem.length is 1.
How to convert value to JSON format send to Backend.

Have you tried my solution?

Jebasuthan
– Jebasuthan

2021-10-20 09:50:20 +00:00
Commented Oct 20, 2021 at 9:50 — Jebasuthan
– Jebasuthan, Commented Oct 20, 2021 at 9:50

Jebasuthan · Accepted Answer · 2021-10-15 07:05:30Z

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

DEMO Link

Collectives™ on Stack Overflow

Vue-multiselect update field using AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related