vue 无法访问对象道具

Question

我在数组中执行 find 方法来搜索对象。我取回了对象，但我无法访问该对象中的道具。 nuxt 错误抛出者说如下：

无法读取未定义的属性“值”

我的代码：

<v-data-table :headers="datatable.headers" :items="datatable.items" class="elevation-1">
    <template v-slot:body="{ items }">
        <tr v-show="inMenu.find(menuItem => menuItem.name == item.name.toLowerCase()).value == true" v-for="(item, index) in items" :key="index">
            <td>{{item.name}}</td>
            <!-- problem is in the <v-text-field> v-model -->
            <td><v-text-field v-model="settings.adminIcons.find(menuItem => menuItem.key == item.name.toLowerCase()).value" label="icon"></v-text-field></td>
        </tr>
    </template>
</v-data-table>

奇怪的是，如果我这样做：

<!-- works -->
<v-text-field v-model="settings.adminIcons.find(menuItem => menuItem.key == 'evenementen').value" label="icon">

而不是这个：

<!-- does not work -->
<!-- item.name.toLowerCase() == 'evenementen' -->
<v-text-field v-model="settings.adminIcons.find(menuItem => menuItem.key == item.name.toLowerCase()).value" label="icon">

它不会工作。但item.name.toLowerCase() 与 'evenementen' 相同。

有什么办法吗？

Answer 1

它给出了错误，因为在 find 中它没有找到任何单个项目它的返回记录，并且您正在尝试访问 .value。

// Error


//console.log(settings['adminIcons'].find(menuItem => menuItem.key == "env1").value)

<script>
const array1 = [5, 12, 8, 130, 44];

const settings = {
	'adminIcons':[
      {"key":"env",
        "value":"value1"}
     ]
}
const found = array1.find(element => element > 10);

console.log(settings['adminIcons'].find(menuItem => menuItem.key == "env").value);


// Error


//console.log(settings['adminIcons'].find(menuItem => menuItem.key == "env1").value);
</script>

Answer 2

基本上，您访问的是 item 的值，其中 item 在您的数据模型中不可用。

这段代码会给你一个字符串，这就是你的错误来自哪里

menuItem.key == item.name.toLowerCase()) // if item.name = 'Test' will become 'test'.

现在，它返回的不是您最初在循环中访问的项目，而是给您一个结果，而是在新数据中。这就是为什么当您访问它的值时，它说无法读取未定义的属性值。