vue idb 格式变量

Question

您好，我正在使用 vuex 和 vue idb 制作一个网络应用程序。在我看来，我有一个带有过滤字段的 table。我的数据使用 vue-idb 存储，过滤字段使用输入文本框事件和列单元格的 header 名称调用 applyFilter 方法函数

这是我的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>

这是我的组件

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

我的问题是我无法使用 header 变量（一个字符串）作为通过 tasksSetFilter 传递的 dict 的键，但是如果我用一个具有相同名称的变量替换它，它就可以工作。

有没有办法将字符串转换为变量名来解决我的问题？

Answer 1

试试这个：

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

此语法的作用是将参数设置为一个对象，其中 key 将是 header 的 value是。这是 ES2015 带来的新语法。

如果不支持ES2015，可以这样构建参数：

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

vue idb 格式变量

vue idb format variable

vuejs2

store

indexeddb

vuex