vue 计算属性，获取异步返回的页面渲染数据，动态添加class失败？

Z时代
2024-02-17
分类：IT

vue 计算属性，获取异步返回的页面渲染数据，动态添加class失败，如下所示isFullLineMap里的内容是在nextTick里面添加的，不加$nextTick，获取不到，但是如果return { 'fullLine': true };写在computed的nextTick里，页面无法渲染出动态添加的class?这应该怎么改？

   computed: {
                getFullLine() {
                    return current=> {
                        const vm = this;
                        this.$nextTick(() => {
                            // console.log('oooooooooo', current, vm.isFullLineMap.get(current))
                            // const a = { 'fullLine': true };
                            // console.log('xxxxxxxxx', a);
                            return { 'fullLine': true };
                        })
                        // return { 'fullLine': true }
                    }
                },
            },

回答：

没能理解OP想要描述的是啥。
我按照自己的理解，这样以为：

页面渲染的数据是异步获取的，想要给他们动态添加一个 fullLine 的 ClassName

那么其实写成一个方法，在渲染的时候直接使用就好了，以下是一段伪代码：

<template>
  <ul>
    <li
      v-for="item in sourceData" 
      :key="item.key"
      :class="{fullLine:isFullLine(item.key)}"
    >
      {{item.value}}
    </li>
  </ul>
</template>
<script>
export default {
  // ...
  methods:{
    // ...
    isFullLine(key){
      return this.isFullLineMap.has(key)
    }
  }    
}</script>

另外OP，如果要用计算属性来计算异步返回的结果，并不是你这样使用的。

如果要使用计算属性的话，其实就变成了以下这样：

<template>
  <ul>
    <li
      v-for="item in listData" 
      :key="item.key"
      :class="{fullLine: item.isFullLine}"
    >
      {{item.value}}
    </li>
  </ul>
</template>
<script>
export default {
  computed:{
    listData(){
      return this.sourceData.map(item=>{
        return {
          ...item,
          isFullLine: this.isFullLineMap.has(item.key)
        }
      })
    }
  }
}</script>