基于表单的网页结构，利用VueJS实现google图形

Question

我是VueJS新手，我需要你的帮助，找出谁来构造我的代码。

我正试图开发一个谷歌图表，它可以通过两个输入收音机来更新，用户可以选择"House“或"appartement”，还有一个输入字段，用户可以在其中输入邮政编码。

我使用一个组件来显示google图形，并理解我应该将一个支柱参数传递给它，以便能够将它个性化。

以下是我的html代码：

<div id="graphe_app">
  <input id=appartement @click="updateData('49099')" type="radio" name="logement" value="appartement" v-model="picked"> Appartement 
 <input id=maison type="radio" name="logement" value="maison" v-model="picked"> Maison

 <input type="text" placeholder="Entrez le nom d'une ville en France" v-model="query" @keyup="getData()" @click="reset()" autocomplete="off" class="form-control input-lg" />
  <div class="panel-footer" v-if="search_data.length">
      <ul class="list-group">
        <li>
         <a href="#" class="list-group-item" v-for="data1 in search_data" @click="getName(data1)">{{ data1.commune }}</a>
        </li>
      </ul>
    </div>
    <graphique :data="chartData"></graphique>
</div>

这是javascript：

<script>
  
Vue.component('graphique', {
  delimiters: ['${', '}'],
  template: '<GChart type="LineChart" :data="chartData" :options="chartOptions"/>',
  props: ["data2", "options"],
  data:function(){ 
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Annee', 'Prix'],
        ['2016', 50],
        ['2017', 100],
        ['2018', 200],
        ['2019', 100],
        ['2020', 150]
      ],
      chartOptions: {
        chart: {
          title: 'Mediane des prix immobiliers des Maisons pour cette ville',
          subtitle: 'Prix par année 2016-2021',
          
        },
        curveType: 'function',
        height: 500,
        pointSize: 10,
      }
    }
  },
  computed: {
    chartData: function() {
      return this.chartData;
    }
  },
  watch: {
      chartData: function() {
        this._chart.destroy();
        //this.renderChart(this.data, this.options);
        this.renderLineChart();
        console.log("graphe mise à jour");
        }
    },
  methods: {
  }
});

var app = new Vue({
    el:'#graphe_app',
    data: {
      picked:'',
      query:'',
      search_data:[],
      chartData:[],
    },
    methods:{
      getData:function(){
        this.search_data = [];
        axios.post('fetch.php', {
          query:this.query
        }).then(response => {
          this.search_data = response.data;
        });
      },
      getName:function(data){
        this.query = data.commune;
        this.search_data = [];
        this.updateData(data.code_commune);
      },
      reset:function(){
        this.query = '';
      },
      updateData(code) {
        console.log('code_commune='+code);
        axios.post('fetch_graph.php', {
          code_commune:code
        }).then(response => {
            var reponse = response.data;
            var result = [['Année', 'Prix']];
            var i = 0;
            for(var ligne in reponse)
            {
                i++;
                Vue.set(this.chartData, i, [reponse[ligne].annee, parseInt(reponse[ligne].mediane)]);
            }
            //console.table(this.chartData);
        });
    }
    }
});

</script>

我迷上了组件，道具，v-绑定/v-模型属性.我应该使用哪种结构？(我知道我的代码不正确，但我尝试了很多事情)

提前感谢！

Answer 1

您应该在组件"graphique“中定义命名数据，从外部传递数据，并使用手表将其值分配给数据部分中定义的对象，以检测其未来的更新。

为简化而删除的其他代码

Vue.component('graphique', {
template: `
    <GChart type="LineChart" :data="chartData" :options="chartOptions"/>
`,
props: ['data'],
data() {
   return {
     chartData: null
   }
},

watch: {
   data: {
     immediate: true,
     handler(newValue) { this.chartData = newValue}
   }
}
});