VueJS - невозможно передать реквизиты от родительского к дочернему компоненту - PullRequest
Новая
       2

VueJS - невозможно передать реквизиты от родительского к дочернему компоненту

2 голосов
/ 03 августа 2020

Это мой родитель: 

<template>
    <Chart :type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
</template>

<script>
import Chart from "./Chart"

    export default {
     components: {
        Chart
    },
  }

</script>

Это мой дочерний компонент: 

<template>
    <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import {Chart} from 'highcharts-vue'

    export default {
      props: ["data", "type"],
      components: {
      highcharts: Chart 
    },
    data() {
      return {
        chartOptions: {
          chart: {
            type: this.type
          },
          series: [{
            data: this.data, // sample data
            name: "Test Series",
            color: "blue"
          }]
        }
      }
  }
  }
</script>

Я могу передавать данные с помощью реквизита, но не типа. Когда я меняю type: this.type на type: "bar", он работает должным образом, поэтому в самом коде ошибок нет.

Я получаю следующее предупреждение: 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "bar" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Что я делаю неправильно?

Ответы [ 2 ]

4 голосов
/ 03 августа 2020

Вы пытаетесь динамически изменить bind тип prop на bar , как если бы последний был переменной. Если вы хотите передать его как строку, сделайте следующее: 

<Chart type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
1 голос
/ 03 августа 2020

Вы используете: type = "bar", поэтому Vue ищет переменную геттера, которая называется "bar". Если вы хотите передать значение в виде строки, вы должны удалить ":" перед "type". 

<template>
    <Chart type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
</template>
...