前端笔记-vue cli中v-bind动态数据实时更新

目录

 

 

基本概念

代码

---

 

基本概念

如下的例子，刚开始运行：

点击按钮：

数据库修改下数据：

再点击按钮刷新下：

下面给出请求的json数据:

刷新有2个方式

第一种是强制刷新，这样是有问题的，数据和图表不能同步：

this.$forceUpdate()

本人推荐下面这种方式，通过绑定组建的key值

把key绑定成变动的值，就可以实时刷新了

 

 

代码

程序结构如下：

关键代码

BarCharts.vue

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'
import echarts from 'echarts'
import TestEChart from './TestEChart'

Vue.config.productionTip = false
Vue.prototype.$axios=Axios
Vue.prototype.$echarts = echarts

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TestEChart },
  template: '',
})

TestEChart.vue