У меня есть родительский компонент, например.parent.vue, через который я передаю свойство props дочернему компоненту.
По сути, я использую vue-chartjs и храню данные диаграммы в дочернем компоненте и передаю данные, метку и другие свойства из parentкомпонент в качестве реквизита.
В родительском компоненте у меня есть 3 кнопки: неделя, месяц, год, при нажатии кнопок. Я изменяю данные диаграммы и отправляю эти измененные данные в дочерний компонент в качестве реквизита.Данные изменяются в родительском компоненте, но не в дочернем компоненте (когда я консоль).Так как же обновить значение данных в дочернем компоненте при нажатии?Если вам нужен код, дайте мне знать.
Родительский компонент
<button @click="changeBtn('euro')"></button>
<button @click="changeBtn('pound')"></button>
<tr v-for="(row,index) in selectedCurrency">
<td>{{ index }}</td>
<td>{{ row.desktop_name }}</td>
<td>
<div>
<line-chart-shadow-v3
:dataSet="row.data"
:lineTension="0.5"
:dataLabels="row.label"
:width="50"
:height="80"
>
</line-chart-shadow-v3>
</div>
</td>
<td>{{ row.data }}</td>
</tr>
//script part below
data () {
return {
selectedBtn: 'dollar',
selectedCurrency: [],
currencyList,
}
},
methods:(){
mounted(){
this.getSelectedCurrency();
},
methods: {
getSelectedCurrency(){
this.selectedCurrency = [];
for (var i = 0; i < currencyList.length; i++){
if(currencyList[i].tag == this.selectedBtn){
this.selectedCurrency.push(currencyList[i]);
console.log(this.selectedCurrency)
}
}
},
changeBtn(value){
this.selectedBtn = value;
this.getSelectedCurrency();
}
}
Дочерний компонент
...
props: {
dataSet: {
type: Array,
default: () => [10, 30, 39, 65, 85, 10, 10]
},
lineTension: {
type: Number,
default: () => 0.4
},
dataLabels: {
type: Array,
default: () => ['A', 'B', 'C', 'D', 'E', 'F']
},
},
...
mounted() {
let self=this;
this.renderChart({
labels: this.dataLabels,
datasets: [{
labels: this.label1,
data: this.dataSet,
lineTension: this.lineTension,
borderColor: gradientColor,
pointBorderWidth: 0,
pointHoverRadius: 0,
pointRadius: 0,
pointHoverBorderWidth: 0,
borderWidth: this.borderWidth,
fill: false
}]
}, this.options)
console.log(this.dataSet)
}