解决vue.js 数据渲染成功仍报错的问题

针对“解决vue.js数据渲染成功仍报错的问题”的完整攻略，可以分为以下几个步骤：

1. 确认报错信息

当出现报错信息的时候，首先需要确认具体的报错信息。不同的报错信息可能有不同的原因和解决方法。常见的一些报错信息包括：

• cannot read property 'xxx' of undefined
• Cannot read property '$emit' of undefined
• Cannot read property 'length' of null
• TypeError: Cannot read property 'map' of undefined

通过观察报错信息，可以初步了解可能的问题所在。例如，“cannot read property 'xxx' of undefined”很可能是因为数据还未正确加载导致的。

2. 检查数据加载

如果出现数据读取失败的情况，就会导致组件无法正确渲染。可以通过以下方法检查数据是否正确加载：

• 使用浏览器开发者工具（比如Chrome的开发者工具）查看网络请求和返回的数据，确认数据是否成功加载和解析；
• 在vue组件中通过打印信息的方式，确认数据是否已经正确地传递给组件；
• 检查是否存在异步请求，如果是异步请求需要确认数据是否加载完成，再渲染页面。

例如，在以下代码中，数据存在异步加载的情况，需要等待数据加载完成后再进行渲染，否则就可能出现渲染不成功但仍报错的情况。

export default {
  data () {
    return {
      items: [],
      loading: false
    };
  },
  created () {
    this.loading = true;
    axios.get('api/items').then((res) => {
      this.items = res.data;
      this.loading = false;
    });
  }
}

3. 检查组件中的算法和表达式

有时候，我们在vue组件中可能会使用一些算法、表达式等语法，如果表达式存在问题或者算法有问题，都有可能导致渲染不成功但仍报错。可以通过以下方法检查：

• 精简表达式，使用console.log()打印出表达式，观察表达式的结果和报错；
• 检查计算属性、监听和方法的实现是否正确；
• 检查与数据绑定和事件绑定相关的语法是否正确。

以下代码是一个使用v-if进行条件渲染的示例，要保证v-if表达式的正确性才能实现正确渲染。

<template>
  <div>
    <div v-if="items.length">
      <ul>
        <li v-for="item in items">{{ item }}</li>
      </ul>
    </div>
    <div v-else>
      <p>Loading...</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('api/items').then((res) => {
      this.items = res.data;
    });
  }
}
</script>

综上所述，针对“解决vue.js数据渲染成功仍报错的问题”的攻略主要包括确认报错信息、检查数据加载、检查组件中的算法和表达式等方面。对于不同的报错信息需要针对性的进行处理，在检查过程中尽量使用打印信息等方法确认问题的根源。