在Nuxt表单中如何获取键值对形式的哈希表？

没问题！我来帮你调整组件代码，让它返回你想要的{ "KEY": "VALUE" }这种键值对格式的哈希表～

你当前的问题出在updateValue方法里——你是把mapKey和mapValue作为固定的键名传递给父组件的，所以才会得到{ "mapKey": "KEY", "mapValue": "VALUE" }的结果。我们只需要做几处关键调整：

1. 修改updateValue方法，生成动态键值对 #

把原来的固定键对象改成动态键名的形式，这样用户输入的mapKey就会成为哈希表的键，mapValue对应它的值：

updateValue () {
  // 创建空对象，用方括号语法设置动态键
  const hashMap = {}
  if (this.mapKey) { // 可选：避免生成空键的无效对象
    hashMap[this.mapKey] = this.mapValue
  }
  this.$emit('input', hashMap)
}

2. 同步调整解析方法，适配新的传入格式 #

因为现在父组件传给子组件的value是一个键值对对象（而非带mapKey/mapValue的结构），所以要修改parseMapKey和parseMapValue方法，从传入的对象中提取键和值：

parseMapKey (value) {
  // 如果传入有效对象，提取第一个键名
  if (value && typeof value === 'object' && Object.keys(value).length > 0) {
    return Object.keys(value)[0]
  } else {
    return ''
  }
},
parseMapValue (value) {
  // 对应提取第一个键的值
  if (value && typeof value === 'object' && Object.keys(value).length > 0) {
    const key = Object.keys(value)[0]
    return value[key]
  } else {
    return ''
  }
}

修改后的完整组件代码 #

<template>
  <div class="columns is-gapless is-marginless">
    <div class="column">
      <b-input
        v-model="mapKey"
        v-bind="$attrs"
        @blur="$emit('blur', $event)"
        @focus="$emit('focus', $event)"
      />
    </div>
    <div class="column">
      <b-input
        v-model="mapValue"
        v-bind="$attrs"
        @blur="$emit('blur', $event)"
        @focus="$emit('focus', $event)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapInput',
  inheritAttrs: false,
  props: {
    value: {
      type: Object, // 类型从String改为Object，匹配键值对格式
      default: () => ({})
    }
  },
  data() {
    return {
      mapKey: '',
      mapValue: ''
    }
  },
  watch: {
    value (value) {
      this.mapKey = this.parseMapKey(value)
      this.mapValue = this.parseMapValue(value)
    },
    mapKey () {
      this.updateValue()
    },
    mapValue () {
      this.updateValue()
    }
  },
  methods: {
    parseMapKey (value) {
      if (value && typeof value === 'object' && Object.keys(value).length > 0) {
        return Object.keys(value)[0]
      } else {
        return ''
      }
    },
    parseMapValue (value) {
      if (value && typeof value === 'object' && Object.keys(value).length > 0) {
        const key = Object.keys(value)[0]
        return value[key]
      } else {
        return ''
      }
    },
    updateValue () {
      const hashMap = {}
      if (this.mapKey) {
        hashMap[this.mapKey] = this.mapValue
      }
      this.$emit('input', hashMap)
    }
  }
}
</script>

使用说明 #

在父组件中直接绑定一个对象类型的变量即可：

<template>
  <div>
    <MapInput v-model="myHashMap" />
    <!-- 用户输入KEY和VALUE后，myHashMap会自动变成 { "KEY": "VALUE" } -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      myHashMap: {}
    }
  }
}
</script>

这样就能完美得到你想要的键值对形式哈希表啦！

备注：内容来源于stack exchange，提问作者Doxxzz