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接收到的有效负载中填充其data属性，然后将其传递给阅读组件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中的任何组件。

Vue js组件在不刷新页面的情况下无法呈现数据

1 个答案: