如何使用对象获取对象

Question

我正在尝试从数据表的列表中获取名称。所以，下面是我编写的代码。

HTML 模板 -

<v-data-table :headers="headers" :items="topics" :footer-props="{'items-per-page-options': [5, 10, 20, 40]}" :items-per-page="10" item-key="srno">
   <template v-slot:item.skillName="{ item }">
       <span>{{ item.skillName || '-' }}</span>
   </template>
</v-data-table>

export default {
  data () {
    return {
      skills: [
        {
          name: ''
        }
      ],
      topics: [],
      headers: [
        { text: 'Sr No', value: 'srno', align: 'center', sortable: true },
        { text: 'Skills', value: 'skills', align: 'center' },
      ],
      skillName: [],
    }
  },
  created: async function () {
    await this.getAllList()
  },
  methods: {

    getAllList: async function () {
      try {
        this.isLoading = true
        let r = []
        let res = await http.get(`${CONSTANTS.API_URL}/api/getall-themes`, {
          params: {
            page: this.page - 1,
            size: this.pageSize
            // search: this.search
          }
        })
        this.topics = res.data.rows.map((item, index) => {
          item.srno = this.pageSize * (this.page - 1) + index + 1
          item.skillName = item.Skills ? item.Skills.name : '-'
          return item
        })
              this.totalPages = res.data.totalPages
      } catch (e) {
        const errorMessage = (e && e.response && e.response.data.message) || e.message
        this.errMsg(errorMessage)
      } finally {
        this.isLoading = false
      }
    },

错误 - skillName 未定义。

预期输出 - 写作，唱歌应该进入技能名称

Answer 1

您不要在标头中声明 skillnName 列，仅声明 skills：

尝试：

export default {
  data () {
    return {
      ...
      headers: [
        { text: 'Sr No', value: 'srno', align: 'center', sortable: true },
        { text: 'Skills',
           value: 'skills', // <---- probably should be skillName
           align: 'center' },
      ],
    }
  },

或者

<v-data-table :headers="headers" :items="topics" :footer-props="{'items-per-page-options': [5, 10, 20, 40]}" :items-per-page="10" item-key="srno">
   <template v-slot:item.skills="{ item }"> <!-- <-------- slot name should match header.value -->
       <span>{{ item.skillName || '-' }}</span>
   </template>
</v-data-table>

另外，根据你的数据，你想在这里使用一个数组，所以你需要从它创建一些可打印的东西。在模板中尝试类似 {{ item.Skills.map(s => s.name).join(',') || '-' }} 的内容。