Structure of webpage with form, google graph using VueJS

Question

I'm new to VueJS and need your help to figure out who to structure my code.

I'm trying to develop a google chart that can be updated thanks to 2 inputs radios where the user can select "House" or "appartement" and an input field where the user enters a postal code.

I use a component to display the google graph and understand I should pass a prop argument to it to be able to personalize it

Here is my html code :

<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>

And here is the 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>

I'm lost with components, props, v-bind/v-model attributes ... Which structure should I use? (I know my code is incorrect but I tried a lot of things)

Thanks in advance!

Answer 1

you should define prop named data in your component "graphique" to pass data from outside and assign it's value to an object defined in your data section inside it using a watch to detect it's future updates

other codes removed for simplicity

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