javascript - Vue js组件在没有页面刷新的情况下不渲染数据
问题描述
我只需要在读数组件上显示 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);
}
}
有人可以指导我,如何在不刷新页面的情况下显示数据
解决方案
让我们将其分解为失败的原因,为什么您不应该采用这种方法以及您可以做些什么来解决它。
为什么它失败了? 失败的原因只有一个,因为脚本标签中的 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 中的任何组件。
推荐阅读
- rxjs - 从不可预测的源 Observable 构建“心跳”Observable
- rest - 如何在 Katalon Studio Rest API 中将变量值传递给 json Path
- javascript - How to prevent infinite re-rendering with useEffect() in React
- ios - 在 SwiftUI 中为视图设置动画以在点击时向上滑动和隐藏
- c - 寻找完美数的程序:输出错误。完美数是因数之和等于给定数的数
- android - How Adding Real time data and give min and max angle to Slice Pie chart
- html - 启用 UTF-8 或使用 TheArtOfDev 的 HtmlRenderer.PdfSharp 设置自定义字体
- javascript - 如何使用 JS 在 CSS 中禁用“悬停”
- python - 对数据库执行多项操作时出错
- perl - 如何在 Perl 中通过引用传递树数据结构?