- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个组件,它在挂载阶段解析一个 json 文件。
问题是:
当我点击一个按钮时,发送另一个 GET 方法来获取另一个 json 文件并将其传输到我的组件。
问题是组件不会使用新 Prop 重新加载自身,而我的组件显示旧值
如果有人知道如何刷新组件,这是我的代码
<template>
<div class="perturbo">
<div class="col-md-3 btnMenu">
<button v-for="item,index in perturboButtonData.button_list" type="button"
v-bind:style="'background:white'"
class="btn-lg btn-block myBtnClass"
@click="activeButton(index)">
{{item.label}}
</button>
</div>
<div class="col-md-9">
<div class="row">
<graphe
v-for="ana,index in perturboData.ANA"
:key="ana.id"
:data="ana"
:index="index"
type="number"
:timeSpec="perturboData.liste_dates">
</graphe>
</div>
<div class="row">
<graphe
v-for="dig,index in perturboData.DIG"
:key="dig.id"
:index="index"
:data="dig"
type="number"
isDigit="YES"
:timeSpec="perturboData.liste_dates">
</graphe>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import Graphe from './Graphe/Graphe.vue'
export default {
name: 'perturbo',
components : {
'graphe' : Graphe
},
data: function () {
return {
isActivated: false,
perturboData: {},
perturboButtonData: {}
}
},
methods: {
activeButton : function (index) {
console.log(this.perturboButtonData)
axios.get('./static/cgi/' + this.perturboButtonData.button_list[index].link)
.then((response) => {
this.perturboData = response.data;
this.isActivated = true
})
}
},
mounted : function () {
axios.get('./static/cgi/format_json_perturbo.json')
.then((response) => {
this.perturboButtonData = response.data;
})
}
}
</script>
这是我的 graphe 组件的代码
<template>
<div class="graphe">
<vue-chart
:chart-events="chartEvents"
:columns="columns"
:rows="rows"
chart-type="LineChart"
:options="options">
</vue-chart>
</div>
</template>
<script>
export default {
name: 'graphe',
props: {
data: {},
timeSpec : Array,
index: Number,
type: String,
isDigit:String,
},
data: function () {
return {
chartEvents: {
'select': function() {
},
'ready': function() {
}
},
rows: [],
columns: [],
options: {
title: this.data.name,
hAxis: {
},
vAxis: {
ticks : []
},
width: 650,
height: 350,
curveType : 'function'
}
}
},
methods: {
normaliseData : function () {
for (let i = 0; i < this.timeSpec.length; i++) {
this.rows[i] = []
this.rows[i][0] = parseFloat(this.timeSpec[i])
}
this.columns[0] = { 'type': 'number', 'label': 'time' }
for (let i = 0; i < this.data.data.length; i++){
this.columns[i+1] = {'type': this.type ,'label': this.data.data[i].name}
}
for (let i = 0; i < this.timeSpec.length; i++) {
for (let y = 0; y < this.data.data.length; y++) {
this.rows[i][y+1] = parseFloat(this.data.data[y].data[i])
}
}
if (this.isDigit == "YES"){
this.digRow(this.rows)
for (let v = 0; v < this.data.data.length; v ++){
this.options.vAxis.ticks[v] = { v: v, f: this.data.data[v].name}
}
this.options.curveType = ''
}
},
digRow : function (rowTab) {
let newRow = []
let lengthMax = rowTab.length
let rowTmp = []
let index = 0
for (let i = 0; i < lengthMax; i ++){
rowTmp[index] = []
rowTmp[index][0] = rowTab[i][0]
for(let y = 1; y < rowTab[i].length; y ++){
rowTmp[index][y] = rowTab[i][y] + y - 1
}
if (i + 1 !== rowTab.length)
{
newRow = rowTmp[index].slice()
newRow[0] = rowTab[i+1][0]
rowTmp.splice(index+1,0,newRow)
index = index + 2
}
}
this.rows = rowTmp
}
},
mounted: function () {
// // pour les colones
this.normaliseData()
}
}
</script>
编辑:我知道问题出在哪里:
从父级接收的数据在挂载函数上只处理一次! ,这就是为什么它不会在更改时重新加载
我应该在 Prop 上使用观察者吗?我该怎么做
最佳答案
不是使用方法来规范化数据,而是为您的行
、列
和选项
属性使用计算属性。这样,如果任何依赖属性发生变化,它将自动更新。
例如,您的 options
属性可以是一个计算属性,如下所示:
computed: {
options() {
let options = {
title: this.data.name,
hAxis: {
},
vAxis: {
ticks : []
},
width: 650,
height: 350,
curveType : 'function'
};
if (this.isDigit == "YES"){
this.digRow(this.rows)
for (let v = 0; v < this.data.data.length; v ++){
options.vAxis.ticks[v] = { v: v, f: this.data.data[v].name}
}
options.curveType = ''
}
return options;
}
}
现在,每当 this.data
、this.isDigit
或 this.rows
更改时,options
属性也会更新。
您的 rows
和 columns
属性将如下所示:
rows() {
let rows = [];
for (let i = 0; i < this.timeSpec.length; i++) {
rows[i] = []
rows[i][0] = parseFloat(this.timeSpec[i])
for (let y = 0; y < this.data.data.length; y++) {
rows[i][y+1] = parseFloat(this.data.data[y].data[i])
}
}
return rows;
},
columns() {
let columns = [];
columns[0] = { 'type': 'number', 'label': 'time' }
for (let i = 0; i < this.data.data.length; i++) {
columns[i+1] = {'type': this.type ,'label': this.data.data[i].name}
}
return columns;
},
关于javascript - 使用vuejs在get方法上刷新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43636038/
我试图将我的 VueJS 组件中的某些内容发送到位于包含该组件的 html 页面中的函数。我是否遗漏了什么,或者这是不可能的? 在我的组件中作为方法: insert: function(){
完全遵循 docs的语言说明,我正在尝试以德语格式显示日期。相反,我仍然看到它是英文的:“12 Apr 2020”。 也尝试使用西类牙语,仍然得到“2020 年 4 月 12 日”。 我错过了什么吗?
我想从 Chart 对象访问 getValue 方法,但我得到的函数未定义。 import Vue from 'vue'; import C
我正在使用 laravel-vuejs 应用程序。当 vuejs 渲染 css 时,它会在 html head 中附加一些样式标签,如下图所示。有什么办法可以隐藏这个标签吗?我认为可以通过添加一些插件
我正在为 VueJS 创建一个加载栏插件,我想使用该插件控制 VueJS 组件(插件的一部分)的数据。 所以,最后我想做以下事情: 在 main.js 中包含插件 import VueLoadingB
如何使用 VueJs 和 VueJS-Router 为 Pimcore 进行扩展? 到目前为止,前端的 vuejs 没有任何问题……但我无法让 VueJs-Router 运行。 有人有在 pimcor
也许你可以成为我一天的救世主。 我正在尝试为我的扩展实现 vue-components。 我不能包含自定义 Vue.js 组件。我关注了https://pagekit.com/docs/develop
我是 Laravel 和 VueJS 的新手,对于困惑的代码提前深表歉意。 我一直在尝试制作一个注册表单,并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }}
我想使用函数作为数据属性。这似乎在“works”数据属性的情况下工作得很好。但是我需要函数中的 this 上下文,以便我可以计算存储在 this.shoppingCart (另一个属性)中的值。 这可
我正在尝试从另一个方法调用一个方法,为此我使用了它。但是我的控制台导致我出错。 如何在 Vuejs 中调用另一个方法中的方法? 代码 methods: { searchLocations:
我已经使用 webpack_loader 创建了 Django 和 VueJS 集成项目。Django 在本地主机 8000 上运行,而 VueJS 在 8080 端口上运行。但是端口 8000 在控
我正在学习如何通过 udemy 类(class)制作单页应用程序,同时尝试做一个大学项目。问题是,在我的 Controller 中,我将数据库查询作为 json“alunos”发送到前端。现在,在 V
我有一个带有一些 html 的#app 容器,我在#app 上创建了 Vue 实例,所有内容都被编译并转换为 Vuejs 组件。然后我在另一个 html 字符串中使用 ajax,我需要以某种方式将其编
我有一个 symfony 2.8 应用程序,我最近集成了 VueJs 2 作为我的前端框架,因为它提供了很大的灵 active 。我的应用程序不是单页的,我使用 symfony Controller
好吧,我遇到了一个问题,虽然是一个奇怪的问题,但我到处都找不到答案。 我们被指派用 Vue.js 创建一个购物车,我已经完成了我自己开始了这个项目,想看看我能用 vuejs 做什么。问题出现在页面加载
逻辑 我有带有输入作为标签的复选框,其值来自数据库,因此文本(值)已经存在。 (完成) 我想列一份检查项目 list (完成) 我想如果我改变了一个项目的值得到改变的值,但它仍然给我数据库的值(需要帮
我正在尝试在页面上显示公告列表(从 API 检索)。我正在使用 Vuex 商店,我有一个名为 announcements 的状态。我还希望每次用户刷新/进入页面时更新此列表。所以我使用了生命周期钩子(
使用单文件模板,我希望有一个按钮,如果数组为空,则显示“单击此处”,如果数组已填充,则显示值。 ajax 工作正常并且对象正在更新,但按钮不会重新呈现。我在这里做错了什么? Mobil
在 VueJS 中,有没有办法在模板或脚本中将字符串插入字符串?例如,我希望以下内容显示 1 + 1 = 2 而不是 1 + 1 = {{ 1 + 1 }}。 {{ myVar }}
我在我的项目中使用 VueJS 2,我意识到我的构建部署很糟糕。 这是我在 github 上部署我的 VueJS 构建的脚本: #!/usr/bin/env sh # abort on errors
我是一名优秀的程序员,十分优秀!