N
N
nurzhannogerbek2018-12-12 10:49:11
JavaScript
nurzhannogerbek, 2018-12-12 10:49:11

Component interaction in Vue.js?

Hello comrades! Please help me figure it out.
The Vue.js app encountered strange behavior. There is a parent component through which I send data to the child.
When you click on the label, which is located on the Yandex map, I open the information window. The child component, in my particular case, is the info window. The information window opens instantly when you click on the label, but the data appears in them after 2 seconds. There is a strange slowdown.
The strangest thing is that the icon in the header of the information window is shown instantly, and the phrase "Detailed information" is shown in 2 seconds along with the transmitted data.
Why is static text shown with a delay? Is the problem in the speed of data transfer between components or in the speed of rendering the information window? I don't quite understand what's going on. How to fix the problem with such braking?
parent.vue:

<template>
  <InformationWindow
    :object_id=object_id
    :object_name=object_id
    :object_address=object_address
    v-if="visable"/>
</template>

<script>
import InformationWindow from './Child.vue';

export default {
  data() {
    return {
      visable: false,
      object_id: null,
      object_name: null,
      object_address: null
    }
  },
  components: {
    InformationWindow,
  },
  methods: {
    geoObjects() {
      ***
      // Инициализовать событие нажатие метки
      placemark.events.add('click', () => {
        self.object_id = markers.data[item]["OBJECT_ID"];
        self.object_name = markers.data[item]["OBJECT_NAME"];
        self.object_address = markers.data[item]["OBJECT_ADDRESS"];
        self.visable = true;
      }
      ***
    }
  }
}
</script>

child.vue:
<template>
  <div class="card">
    <div class="card-header text-uppercase text-center">
      <font-awesome-icon :icon="faInfoCircle"/>
      <span>Детальная информация</span>
    </div>
    <div class="card-body">
      <p class="card-text" v-if="object_id">
        <span>Номер:</span><span>{{ object_id }}</span>
      </p>
      <p class="card-text" v-if="object_name">
        <span>Название: </span><span>{{ object_name }}</span>
      </p>
      <p class="card-text"  v-if="object_address">
        <span>Адрес: </span><span>{{ object_address }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "InformationWindow",
  props: {
    object_id: {
      type: Number
    },
    object_name: {
      type: String
    },
    object_address: {
      type: String
    }
  }
}
</script>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
W
WebDev, 2018-12-12
@nurzhannogerbek

There can be no delay in data transfer between components. It's in your developer mode that they are components, and in the end it all comes together in a single file.
When you click, for sure the Ajax request goes to Yandex. This is what you are waiting for.
Open the developer console and take a look.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question