On a pit

Case description: in I use < component / > tag as dynamic binding, because the label is an array, so you need to use v – for, but because I hope the tag content is determined according to whether be selected, that is to say, need according to the selected props decided to label according to situation

Option 1. At first I chose the V-if example:

C is not defined, after checkingvue3, it can be known that in VUe3, the priority of V-if is higher than that of V-for, so V-if cannot enter the variable of V-for

Also note that this is a break for VUe3

Option 2 chooses to calculate the current with the calculated propertytitleandselectedEqual, then return only the label that needs to be displayed, bound in:isUp, but then I ran into another problem that I didn’t bind at the beginning:keyOn the Component tag, the content cannot be changed, and a dynamic key value needs to be bound

<component :is="current" :key="current.props.title"/>

setup(){
const current = computed(()=>{return defaults.find(t=>t.props.title===props.selected)})

}
Copy the code

Scheme 3 dynamically binds class values and combines diasPlay: Block and display: None in CSS to control display and hiding

<component class="evua-tabs-content-item" v-for="c in defaults" :class="{selected:c.props.title===selected}" :is="c" /> //css .evua-tabs-content-item { display: none; &.selected { display: block; }}Copy the code

On hole 2

When I was doing code optimization, I foundwatchEffectIt can realize real-time monitoring from label mounting to update. Therefore, onMounted and onUpdated were used to mount labels at the beginning. Later, it was found that watchEffect could be usedwatchEffect(getValue)“Is found later when runningwatchEffect()The monitoring was started before the tag was mounted, so the data was initially read as null. After checking the documentation, we can pass in the second parameter flush to ensure that the data is read after the component is rendered

const selectedItem = ref<HTMLDivElement>(null); const indicator =ref<HTMLDivElement>(null); const container = ref<HTMLDivElement>(null); const getValue=()=>{ const {width} = selectedItem.value.getBoundingClientRect() indicator.value.style.width = width+'px'  const {left:left1} = selectedItem.value.getBoundingClientRect() const {left:left2} = container.value.getBoundingClientRect() const left = left1 -left2 indicator.value.style.left = left +'px' }; onMounted(getValue); onUpdated(getValue); ---------------------- watchEffect(getValue, { flush: 'post' });Copy the code