带有表单的网页结构，使用 VueJS 的谷歌图

Question

我是 VueJS 新手，需要您的帮助来确定由谁来构建我的代码。

我正在尝试开发一个可以更新的谷歌图表，这要归功于用户可以选择“房屋”或“公寓”的 2 个输入收音机和一个用户输入邮政编码的输入字段。

我使用一个组件来显示谷歌图表并理解我应该将一个 prop 参数传递给它以便能够对其进行个性化

这是我的 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-bind/v-model 属性... 我应该使用哪种结构？ （我知道我的代码不正确，但我尝试了很多东西）

提前致谢！

Answer 1

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

为简单起见删除了其他代码

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}
   }
}
});