Vuejs dynamic value name

Question

I have multiple select option with custom naming and i wish to push those custom names to back-end but it doesn't get the name.

Code

sample

<select @change="zoneChange('city', $event)"></select>
<select @change="zoneChange('area', $event)"></select>
<select @change="zoneChange('link', $event)"></select>

What I want to get in backend is like:

array:1 [
  "city" => 4
]

or

array:1 [
  "area" => 1
]

array:1 [
  "link" => 5
]

so that way i can filter my database result based on input name city, area, link, etc. and find related data to those ids 4, 1, 5....

Currently what i get is:

array:1 [
  "val" => 4
]

I need that val changes to my custom names.

Script

zoneChange(val, e) {
    // val = city, area, link, etc.
    // e = 4, 1, 5, etc.
    console.log(val, e)

    axios.post('/api/admin/maps/valChanger', {val: e})
    .then(res => {
        //.....
    })
    .catch(error => {
        //.....
    });
},

Any idea?

Answer 1

You need to use array syntax [] to set object key dynamically:

zoneChange(val, e) {
  axios.post('/api/admin/maps/valChanger', {[val]: e})
    .then(res => {

    })
}

In javascript, when you set objects keys like shown below, the word key is interpreted as a string:

console.log({ key: 'value' })
// will output {key: "value"}

And if you want to set some value as a key, you have to use that [] array syntax:

// the value of the variable will be used as key
let key = 'someKeyName' 

console.log({ [key]: 'value' })
// will output { someKeyName: "value" }