clientWidth计算不对

Question

<template>
  <div class="choice">
    <ul ref='ul' v-bind:style="{width:ulWidth+'px'}">
      <li
        v-for="(item,index) in list"
        :key="item.id"
        :class="active===index?'active':''"
        @click="select(index)"
      >{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["list"],

  data() {
    return {
      active: 0,
      ulWidth:0
    };
  },
  mounted(){
    this.computeUlWidth()
  },
  created() {
  },
  methods: {
    computeUlWidth(){
      const lis=this.$refs['ul'].children
      for(let i=0;i<lis.length;i++){
        const element=lis[i]
        console.dir(element)
        console.log('hh'+element.clientWidth)
        this.ulWidth+=element.clientWidth
        this.ulWidth+=30
      }
      this.ulWidth+=20
    },
    select(index) {
      this.active = index;
    }
  },
  components: {}
};
</script>
<style lang='scss' scoped>
.choice {
  overflow-x: scroll;
  ul {
  height: 30px;
  margin: 5px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  li {
    display: flex;
    line-height: 30px;
    padding: 0 20px;
    // float: left;
    border-radius: 20px;
    &.active {
      // height: ;
      color: #ed9e37;
      background-color: #f4f4f4;
    }
  }
}
}

</style>

我动态计算ul的宽度时，每个li的clientWidth都是一样的。这就有问题。但是不知道为什么都是一样的。

Answer 1

考虑一下nextTick的问题：

https://segmentfault.com/a/11...

Answer 2

1. 可能是 props 中 list 传入有异步的问题，也就是 mounted 后 list 才更新的。
   这种情况需要 watch list 且使用 $nextTick 后再获取 dom 宽度
2. 建议使用 element.getBoundingClientRect() 去获取宽度。