vue idb format variable

Question

Hello I'm making a web app using vuex and vue idb. In one of my view I have a table with filter fields. My data are stored using vue-idb and filter fields call applyFilter methods function using the input text box event and the header name of the column's cell

Here is my html

...some html     
<!--columns filters-->
            <tr>
              <td v-if='shownHeaders.length > 0'>
                <input type='checkbox' @change='updateCheckboxList(-1)' :checked='checkAllCheckbox'>
              </td>

              <td v-for='(header,index) in headers' v-if='headers.indexOf(header)>-1'>
                <input @keyup="applyFilter(header,$event )" :disabled="thinking" :placeholder='header +" filter"'>
              </td>
            </tr>

Here is my component

some code ...

applyFilter (header, e) {
      // apply filter after enter key has been pressed
      if (e.keyCode === 13) {
        console.log('Filtering column ' + header + ' with ' + e.target.value)
        // not working unsing dynamical variable, but it does while using static variable like uid
        store.dispatch('tasksSetFilter', {header: e.target.value}) // this doesn't works
        // store.dispatch('tasksSetFilter', {id: e.target.value}) // this works

My issue is that I'm unable to use header variable (a string) as key of dict passed with tasksSetFilter, but if I replace it by a variable having the same name it works.

Is there a way to transform string to variable name to solve my problem?

Answer 1

Try this:

store.dispatch('tasksSetFilter', {[header]: e.target.value})

What this syntax does is set the parameter to an object where the key will be whatever the value of header is. This is a newer syntax that came about with ES2015.

If you could not support ES2015, you could build the parameter this way:

let filter = {}
filter[header] = e.target.value
store.dispatch('tasksSetFilter', filter)