使用 Object.entries 遍历对象

Question

我有一个组合框组件来显示来自 API 请求的标签。组件以这种格式接收标签作为道具：

"tags": [ { "name": "Rejected" }, { "name": "Accepted" } ] }

我正在尝试获取值name 并将其设置为v-model，以显示保存在数据库中的标签并在用户需要更新时保留新标签。这是组合框代码：

 <v-container fluid>
  <v-combobox
    v-model="model"
    :items="items"
    :search-input.sync="search"
    hide-selected
    hint="Maximum of 5 tags"
    label="Add some tags"
    multiple
    persistent-hint
    small-chips
  >
    <template v-slot:no-data>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>
            No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template>
  </v-combobox>
</v-container>

道具

props:{
  value:{
    required: true,
    type:Object
  }
}

计算

computed: {
  model() {
   return Object.entries(this.value.tags).forEach(([key,value]) => {
     return this.model = value
   })
  }
},

当我尝试使用Object.entries（我想用来遍历属性）获取值时的问题是：

TypeError: 无法将 undefined 或 null 转换为对象

Answer 1

错误

Cannot convert undefined or null to object 错误表示this.value.tags 在计算时尚未定义。计算的道具在初始化 before value 提供时运行。一种解决方案是在包含初始 tags 的 prop 声明中指定默认值：

export default {
  props: {
    value: {
      default: () => ({ tags: [] })
    }
  }
}

从tags数组中提取值

如果我理解正确，您正在尝试将 name 值从 tags[] 映射到数组中。你可以通过Array.prototype.map 做到这一点：

export default {
  computed: {
    model() {
      // takes the `name` property from each object in `tags[]`
      return this.value.tags.map(({ name }) => name)
    }
  }
}

绑定到计算属性

我注意到您在<v-combobox v-model="model"> 中绑定了model 计算属性，但v-model 需要一个可写属性，而model 不是。您应该会在开发模式下看到与此相关的控制台警告。

我认为model 真的应该是items。用户选择的值将存储在v-model 中，因此它应该是在组件的data() 中声明的某个属性：

<template>
  <v-combobox
    v-model="selectedItems"
    :items="model"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedItems: []
    }
  },
  computed: {
    model() { /* ... */ }
  }
}
</script>