提问人：GAkino 提问时间：11/17/2023 最后编辑：GAkino 更新时间：11/17/2023 访问量：29
VueJs useSlots 属性在 array.map（） 上返回错误
VueJs useSlots property returns error on array.map()
问：
我在vuejs中为选项卡创建了一个可重用的组件
如果我像这样使用组件，它就会起作用。
App.vue （英语）Tab
<Tabs>
<Tab title="Tab 1"></Tab>
</Tabs>
但是，如果尝试循环使用组件，则会在组件中返回错误。Tabv-forTab
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'title')
<Tabs>
<Tab title="Tab 1" v-for="(car, counter) in cars" v-bind:key="counter"></Tab>
</Tabs>
下面是组件的标签Tab<script setup>
<script setup>
import { ref, useSlots, provide } from "vue";
const slots = useSlots();
const tabTitles = ref(slots.default().map((tab) => tab.props.title));
const selectedTitle = ref(tabTitles.value[0]);
provide("selectedTitle", selectedTitle)
</script>
尝试使用for循环，以便我可以动态循环组件。Tab
我应该如何声明，以便我可以在 ？Tabv-for
const tabTitles = ref(slots.default().map((tab) => tab.props.title));
答：
0赞
aarvinr
11/17/2023
#1
要解决此问题，您可以更改 的值以匹配计数数组：title
<Tabs>
<Tab v-for="(car, counter) in cars" :key="counter" :title="car.title"></Tab>
</Tabs>
确保更改数组以了解包含标题：cars
<script setup>
import { ref, useSlots, provide } from "vue";
const slots = useSlots();
const cars = ref([
{ title: "Tab 1" },
{ title: "Tab 2" },
{ title: "Tab 3" },
]);
provide("selectedTitle", cars[0].title);
</script>
评论
0赞
GAkino
11/23/2023
我打算通过像这样获取组件标题道具来使用我的 Tab 组件const tabTitles = computed( () => slots.default()[0].children.map((tab) => tab.props.title) )
评论