网页结构与表单，谷歌图形使用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

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

为简化，删除了其他代码

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