Vue格式化数据后切换页面出现NaN问题及解决

Vue格式化数据后切换页面出现NaN问题是一个常见的问题，这通常是由于数据类型不一致造成的。下面将为大家提供一份完整的攻略，帮助大家解决这个问题。

问题描述

在Vue中，你可能会遇到这样的情况：你在页面初始化时通过某种方式将数据格式化，但是当你切换页面时，你会发现数据变成了NaN。这是一个非常困扰人的问题，但是却很容易解决。

解决方案

1. 数据类型判断与转换

格式化数据后，我们需要保证数据的类型一致，如果不一致，就会出现NaN的问题。

因此，在数据类型不一致的情况下，我们需要进行数据的类型判断与转换，以确保数据的一致性和准确性。具体的方法如下：

<script>
export default {
  data () {
    return {
      currentValue: '',
      data: [
        { id: 1, name: 'Tom', age: 18, price: 100 },
        { id: 2, name: 'Jerry', age: '21', price: '150' },
        { id: 3, name: 'Amy', age: 25, price: '199.99' }
      ]
    }
  },
  methods:{
    transAge(value){
      if(typeof value === 'string' && /^\d+$/.test(value)){
        return parseInt(value);
      }
      return value;
    },
    transPrice(value){
      if(typeof value === 'string'){
        return parseFloat(value);
      }
      return value;
    }
  },
  computed:{
    formatData(){
      return this.data.map(item => {
        item.age = this.transAge(item.age);
        item.price = this.transPrice(item.price);
        return item;
      });
    }
  }
}
</script>

上述代码中，我们添加了两个转换方法transAge和transPrice，通过这两个方法将数据中的字符串类型转换成数字类型。同时，在computed中我们可以调用这两个方法来格式化数据。

2. 保证数据的准确性

除了数据类型的问题之外，还有一个常见的问题就是在获取数据的过程中，数据可能还没有完整的获取到，导致有部分数据未定义的情况下，进行计算时就会出现NaN的问题，因此在进行计算之前，需要保证数据的完整性。

<script>
export default {
  data () {
    return {
      data: [],
      count: 0
    }
  },
  created() {
    // 获取数据
    axios.get('/api/data')
      .then(res => {
        this.data = res.data;
        this.count = this.data.length;
      })
  },
  computed:{
    totalPrice(){
      let totalPrice = 0;
      // 判断数据是否存在
      if(this.data.length > 0){
        // 计算总价
        this.data.forEach(item => {
          totalPrice += item.price;
        });
      }
      return totalPrice;
    }
  }
}
</script>

上述代码中，我们在created生命周期中通过axios获取了数据，因此需要保证数据的完整性后才能进行计算，因此在computed中我们添加了对data的判断来解决计算时出现NaN的问题。

总结

以上就是解决Vue格式化数据后切换页面出现NaN问题的攻略。数据类型判断与转换、保证数据的准确性这两方面是解决这个问题的关键。只要我们仔细分析其中的原因并按照步骤解决，就可以避免这个问题的出现。