Vue. js: Почему я не могу привязать внешнее свойство к дочернему компоненту реквизита? - PullRequest
Новая
       9

Vue. js: Почему я не могу привязать внешнее свойство к дочернему компоненту реквизита?

0 голосов
/ 02 апреля 2020

У меня вопрос по поводу Vue. js, я застрял на чем-то хитром, я думаю.

Я не могу связать переданное свойство как свойство компонента, чтобы сделать что-то с этими данными, вот мой код, проблема затрагивает Plot компонент.

Вот мой компонент панели мониторинга, который является родительским: 

<template>
  <div>
    <div v-if="!hasError && countryData">
      <div v-if="loading" id="dashboard" class="ui two column grid sdg-dashboard sdg-text-center active loader">
      </div>
      <div v-else id="dashboard" class="ui two column grid sdg-dashboard">
        <div class="column sdg-text-center">
          <MapDisplay :country="countryData" :latitude="latData" :longitude="lonData"/>
        </div>
        <div class="column">
          <TopicSelector v-on:topicSelectorToParent="onTopicSelection" :goals="goalsData"/>
        </div>
        <div class="two segment ui column row sdg-text-center">
          <Plot :topic-selection-data="topicSelectionData"/>
        </div>
      </div>
      <sui-divider horizontal><h1>{{ countryData }}</h1></sui-divider>
    </div>
    <div v-else>
      <NotFound :error-type="pageNotFound"/>
    </div>
  </div>
</template>

<script>
import NotFound from '@/views/NotFound.vue';
import MapDisplay from '@/components/dashboard/MapDisplay.vue';
import TopicSelector from '@/components/dashboard/TopicSelector.vue';
import Plot from '@/components/dashboard/Plot.vue';

const axios = require('axios');

export default {
  name: 'Dashboard',
  components: {
    NotFound,
    MapDisplay,
    TopicSelector,
    Plot
  },
  props: {
    countryCode: String
  },
  data: function() {
    return {
      loading: true,
      hasError: false,
      country: this.countryCode,
      //Country, lat, lon
      countryData: null,
      latData: null,
      lonData: null,
      //Goals provided to Topic Selector
      goalsData: null,
      //Selected topic provided by Topic Selector
      topicSelection: null,
      //Topic Data provided to Plot component
      topicData: null, //All topic data
      topicSelectionData: null,
      pageNotFound: "Error 500 : Cannot connect get remote data."
    }
  },
  created: function() {
    const api = process.env.VUE_APP_SDG_API_PROTOCOL + "://" + process.env.VUE_APP_SDG_API_DOMAIN + ":" + process.env.VUE_APP_SDG_API_PORT + process.env.VUE_APP_SDG_API_ROUTE;
    axios.get(api + "/countrycode/" + this.countryCode)
      .then(response => {
        this.countryData = response.data.data.country;
        this.latData = response.data.data.coordinates.latitude;
        this.lonData = response.data.data.coordinates.longitude;
        this.goalsData = response.data.data.goals.map(goal => {
          return {
            goal_code: goal["goal code"],
            goal_description: goal["goal description"]
          }
        });
        this.topicData = response.data.data.goals;
      })
      .catch(() => this.hasError = true)
      .finally(() => this.loading = false);
  },
  methods: {
    onTopicSelection: function(topic) {
      this.topicSelection = topic;
      this.topicSelectionData = this.topicData.filter(goal => this.topicSelection.includes(goal["goal code"]));
    }
  }

  }
</script>

<style scoped lang="scss">
  #dashboard {
    margin-bottom: 3.1vh;
    margin-left: 1vw;
    margin-right: 1vw;
  }
</style>

Вот компонент Plot, который является его дочерним элементом : 

<template>
  <div id="plot">
    topic data : {{ topicData }}<br>
    topicSelectionData : {{ topicSelectionData }}
  </div>
</template>

<script>
export default {
  name: 'Plot',
  props: {
    topicSelectionData: Array
  },
  data: function() {
    return {
      topicData: this.topicSelectionData //This line is not working =(
    }
  }
}
</script>

<style scoped lang="scss">
</style>

Я могу видеть свои данные в {{ topicSelectionData }}, но когда я связываю их с topicData, я не могу получить данные, используя {{ topicData }} или делая какие-то вещи внутри метода, используя topicData как input.

Не могли бы вы мне помочь?

С уважением

1 Ответ

0 голосов
/ 02 апреля 2020

Вам необходимо присвоить значение на mounted следующим образом: 

data() {
    return {
         topicData: ''
    }
},
mounted(){
     this.topicData = this.topicSelectionData;
}

И чтобы обновить дочерний элемент при изменении значения в родительском: 

watch: {
     topicSelectionData: function(newValue, oldValue) {
           this.topicData = newValue;
     }
},
...