Question

您好我正在使用vuex和vue idb制作网络应用。在我的一个视图中，我有一个带有过滤字段的表。我的数据使用vue-idb存储，过滤字段使用输入文本框事件和列的单元格的标题名称调用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

我的问题是我无法使用标头变量（字符串）作为与tasksSetFilter一起传递的dict的键，但是如果我将其替换为具有相同名称的变量，则可以使用它。

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

Answer 1

试试这个：

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

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

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

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

vue idb格式变量

1 个答案: