Vue js组件在没有页面刷新的情况下不渲染数据

Question

我只需要在读数组件上显示 jsonp 回调数据。我在加载读数组件时动态地将 js 脚本添加到 html 头中。来自回调函数的数据正在页面上显示。但是当我移动到主路由并返回读数路由时，不会显示来自回调的数据。数据仅在刷新网页时显示。 这是回调函数脚本：

mounted() {
      this.fetchData()    
    }, 

    methods: {
      fetchData() {        
        let universalisScript = document.createElement('script');
        universalisScript.setAttribute('type', 'application/javascript');
        universalisScript.setAttribute('src', "/js/universalis.js"),
        universalisScript.setAttribute('src', "/js/universalis.js"),
        universalisScript.async = true,
        document.head.appendChild(universalisScript),
        document.head.removeChild(universalisScript);
      }
    }

有人可以指导我，如何在不刷新页面的情况下显示数据

Answer 1

让我们分解它失败的原因、为什么不应该采用这种方法以及如何解决它。

为什么会失败？ 失败的原因只有一个，因为脚本标签中的 javascript 将从上到下运行，因此，您的回调只会在每次页面加载时运行一次。路由更改是以编程方式完成的，而不是页面的实际更改，这就是为什么它被称为单页应用程序 (SPA)，因为一切都发生在一个页面上。

为什么不应该采用这种方法？ 因为每次你的阅读组件挂载时，它都会在头部添加一个脚本标签，因为页面已经加载，所以根本不会执行。

你能做些什么来解决它？ 使用Nuxt.js，经过这个你就会明白什么是页面组件了。现在页面组件可以异步加载，因此，您可以创建一个阅读页面组件，从您从 API 接收到的有效负载填充它的数据属性，并将其传递给您的阅读组件 prop，如下所示：

如果您使用的是 Nuxt.js

<template>
  <div>
    <readings :readings-data="universalisData" />
  </div>
</template>
<script>
import Readings from '@/components/Reading'
import axios from 'axios'
import adapter from 'axios-jsonp'

export default {
  components: {
   Readings,
  },
  asyncData() { // This is a Nuxt.js feature and not a vue feature
    return axios({ url: 
      'universalis.com/Asia.India/20190124/jsonpmass.js',
       adapter: jsonpAdapter,
       callbackParamName: 'universalisCallback' })
    .then(response => {
      /**
       The following return will pre populate the data property of the
       vue component without any explicit defining of 'universalisData'
       in the data property.
      **/
      return { universalisData: response }
     })
    .catch(error => {
      return {}
     })
   },
   data() {
    return {
     // No need to set 'universalIsData' if you populate from asyncData 
    }
   }

}
</script>

如果你只使用 Vue

<template>
  <div>
    <readings :readings-data="universalisData" />
  </div>
</template>
<script>
import Readings from '@/components/Reading'
import axios from 'axios'
import adapter from 'axios-jsonp'

export default {
  components: {
   Readings,
  },
  data() {
   return {
     universalisData: {},
    }
  }
  methods: {
   getUniversalisData() {
    return axios({ url: 
      'universalis.com/Asia.India/20190124/jsonpmass.js',
       adapter: jsonpAdapter,
       callbackParamName: 'universalisCallback' })
    .then(response => {
      return response
     })
    .catch(error => {
      return {}
     })
   },
  },
   created() { // or any other lifecycle event you want to listen to as per your discernment
     this.getUniversalisData()
       .then(response => {
         this.universalisData = response
       })
       .catch(error => {
         this.universalisData = {}
       })
   }
}
</script>

这样，每次阅读页面组件加载时，而不是页面刷新，它都会获取阅读数据，填充页面组件的 data 属性，您可以将其传递给阅读组件的 prop。但请记住，asyncData 仅适用于页面组件，不适用于 Nuxt.js 中的任何组件。