Vue: уведомить дочерний компонент об изменении свойства, измененного его родителем. - PullRequest
Новая
       10

Vue: уведомить дочерний компонент об изменении свойства, измененного его родителем.

0 голосов
/ 30 сентября 2018

У меня есть дочерний компонент, который в основном представляет собой окно поиска.Когда пользователь что-то набирает и нажимает enter, запускается событие, которое отправляется родителю с темой поиска: 

export default {
  name: "SearchBar",
  methods: {
    searchRequested(event) {
      const topic = event.target.value;
      this.$emit('searchRequested', topic);
    }
  }
};

Родитель получает событие и обновляет реквизит, связанный с другими его дочерними элементами (изображениегалерея): 

<template>
  <div id="app">

    <SearchBar @searchRequested="onSearchRequested($event)" />
    <Images :topic="topic" />

  </div>
</template>

<script>
import SearchBar from './components/SearchBar.vue'
import Images from './components/Images.vue'

export default {
  name: 'app',
  components: {
    SearchBar,
    Images
  },
  data() {
    return {
      topic: ''
    };
  },
  methods: {
    onSearchRequested(topic) {
      this.topic = topic;
    }
  }
}
</script>

Пока все хорошо.Но теперь я хочу, чтобы дочерний компонент сам загружал изображения, связанные с искомой темой, всякий раз, когда пользователь выполняет новый поиск.Для этого дочерний компонент Images должен знать об изменении его свойства topic, поэтому я создал вычисляемый: 

import { ImagesService } from '../services/images.service.js';

export default {
  data() {
    return {
      topic_: ''
    };
  },
  methods: {
    updateImages() {
      const images = new ImagesService();
      images.getImages(this.topic_).then(rawImages => console.log(rawImages));
    }
  },
  computed: {
    topic: {
      get: function() {
        return this.topic_;
      },
      set: function(topic) {
        this.topic_ = topic;
        this.updateImages();
      }
    }
  }
};

Но, к сожалению, setter никогда не вызывается.Я должен сказать, что я новичок в Vue, так что, вероятно, я делаю что-то не так.Любая помощь будет оценена.

1 Ответ

0 голосов
/ 30 сентября 2018

Вам не нужно создавать вычисления в основном компоненте.Компонент Images уже в курсе изменений в теме prop.Вам нужно следить за изменениями темы и выполнять асинхронную операцию в 'Images.vue'.Это возможно с наблюдателями Vue.

Наблюдатели Vue docs

'. / Components / Images.vue' 

<template>...</template>
<script>
export defult {
 props: ['topic'],
 data(){
   return {
        images: []
    }
 },
 watch: {
    topic(newVal){
       // do async opreation and update data.
       // ImageSerice.get(newVal)
       //   .then(images => this.images = images)
     }
  }
}
</script>
...