尝试访问 vuetify 中 v-select (itemProps) 的嵌套 json 值

Question

我正在尝试在 vuetify 中创建一个 v-select 组件，它从 API 获取数据并将其显示为选项，但奇怪的是收到的 json 数据在对象内部有一个对象，并且无法访问:(
这里是我的代码：

<template>
  <Comp v-model="trainer" class="mt-10 mb-20 text" />
</template>

<script>
  import Comp from './Comp.vue'
  export default {
    components: {
      Comp,
    },
    data() {
      return {
        trainer: '',
      }
    },
  }
</script>

这是 Comp 组件：

<template>
  <v-select
    label=" trainer"
    v-model="selected"
    v-bind="$attrs"
    :item-props="itemProps"
    :items="items"
  ></v-select>
</template>

<script>
  export default {
    props: ['value'],
    data() {
      return {
        selected: this.value,
        items: [
          {
            id: 7,
            user: {
              first_name: 'john',
              last_name: 'Doe',
              phone_number: '0910087634',
              email: '[email protected]',
            },
            specializations: null,
            bio: '  hello',
            image: '',
            birthdate: '2024-01-01',
            gender: 'male',
            experience_years: 7,
          },
        ],
      }
    },
    methods: {
      itemProps(item) {
        return {
          title: item.user.first_name,
          subtitle: item.id,
        }
      },
    },
    computed: {
      selected: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        },
      },
    },
  }
</script>

这部分代码工作正常：

itemProps(item) {
        return {
          title: item.bio,
          subtitle: item.id,
        }
      },

但是当你想通过

item.user.first_name

而不是

item.bio

时，它会出错，我不知道。 这里是游乐场:

Answer 1

在您的代码中，我发现了两个问题：

• 您有一个不明确的属性（选择为数据并选择为计算），请删除 seleted 数据来解决此歧义，
• 您不必检查所选值是否将用户作为嵌套对象。如果所选值没有嵌套的 user 对象，则 item.user.first_name 不起作用（这是您作为初始值的情况，选择的是空字符串）。

这是您问题的解决方案：

<template>
  <v-select
    label=" trainer"
    v-model="selected"
    v-bind="$attrs"
    :item-props="itemProps"
    :items="items"
  ></v-select>
</template>

<script>
  export default {
    props: ['value'],
    data() {
      return {
        items: [
          {
            id: 7,
            user: {
              first_name: 'john',
              last_name: 'Doe',
              phone_number: '0910087634',
              email: '[email protected]',
            },
            specializations: null,
            bio: '  hello',
            image: '',
            birthdate: '2024-01-01',
            gender: 'male',
            experience_years: 7,
          },
        ],
      }
    },
    methods: {
      itemProps(item) {
        return {
          title: item.user?.first_name,
          subtitle: item.id,
        }
      },
    },
    computed: {
      selected: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        },
      },
    },
  }
</script>