Как динамически обновить значение реквизита в дочернем компоненте из родительского компонента? - PullRequest
0 голосов
/ 10 июля 2019

У меня есть родительский компонент, например.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)
    }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...