使用ref()不响应重新分配-组合API

Question

这里有一个简单的转盘：

<template>
<div ref="wrapperRef" class="js-carousel container">
<div class="row">
<slot></slot>
</div>
<div class="row">
<template v-for="n in noOfSlides" :key="n">
<span style="margin-right: 25px;" @click="console.log(n)">O</span>
</template>
</div>
</div>
</template>

这使用选项APInoOfSlides正在正确更改，for循环在安装后重新渲染

export default {
name: 'carousel',
data() {
return {
noOfSlides: 0
}
},
mounted(){
this.noOfSlides = this.$refs.wrapperRef.querySelectorAll('.js-carousel-item').length;
}
}

当使用下面这样的组合API时，它不起作用noOfSlides没有更改，因此循环不会重新渲染

export default {
name: 'carousel',
setup() {
const wrapperRef = ref(null);
let noOfSlides = ref(0);

onMounted(function () {
noOfSlides = wrapperRef.value.querySelectorAll('.js-carousel-item').length;// this here properly returning the number of slides(more than 0 anyway)
})
return {
wrapperRef,
noOfSlides
}
}
}

我在这里想念什么？

Answer 1

这不是使用DOM的Vue方法，您可以使用slots:

export default {
name: 'carousel',
setup(props, { slots }) {
const wrapperRef = ref(null);
let noOfSlides = ref(0);
onMounted(function () {
console.log('slots ', slots.default());
noOfSlides.value = slots.default().length;
});
function log(n) {
console.log('n ', n);
}
return {
wrapperRef,
noOfSlides,
log,
};
},
};

演示