Hello VueJS enthusiasts! I'm diving into VueJS and seeking guidance on structuring my code efficiently.
My current project involves creating a dynamic Google chart that updates based on user selections from two radio inputs - "House" or "Apartment", along with an input field for entering a postal code.
I have implemented a component to display the Google graph, and I understand that passing a prop argument to personalize it is essential.
Take a look at my HTML code snippet:
<div id="graph_app">
<input id="apartment" @click="updateData('49099')" type="radio" name="housing" value="apartment" v-model="picked"> Apartment
<input id="house" type="radio" name="housing" value="house" v-model="picked"> House
<input type="text" placeholder="Enter a city name in 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>
<graph :data="chartData"></graph>
</div>
Here is the corresponding JavaScript code:
<script>
Vue.component('graph', {
delimiters: ['${', '}'],
template: '<GChart type="LineChart" :data="chartData" :options="chartOptions"/>',
props: ["data2", "options"],
data:function(){
return {
chartData: [
['Year', 'Price'],
['2016', 50],
['2017', 100],
['2018', 200],
['2019', 100],
['2020', 150]
],
chartOptions: {
chart: {
title: 'Median Housing Prices for this City',
subtitle: 'Price by year 2016-2021',
},
curveType: 'function',
height: 500,
pointSize: 10,
}
}
},
computed: {
chartData: function() {
return this.chartData;
}
},
watch: {
chartData: function() {
this._chart.destroy();
this.renderLineChart();
console.log("Graph updated");
}
},
methods: {
}
});
var app = new Vue({
el:'#graph_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('city_code='+code);
axios.post('fetch_graph.php', {
city_code:code
}).then(response => {
var res = response.data;
var result = [['Year', 'Price']];
var i = 0;
for(var line in res)
{
i++;
Vue.set(this.chartData, i, [res[line].year, parseInt(res[line].median)]);
}
});
}
}
});
</script>
I'm grappling with understanding components, props, v-bind/v-model attributes... Can anyone suggest a more structured approach for my task? Any help is greatly appreciated!
Thank you in advance!