Зачем обновлять данные в шаблоне vue, а не в javascript части

Question

my {{this.topic}} в разделе шаблона обновляется при изменении его значения в родительском компоненте, но то же значение в части скрипта просто остается, остается первым значением, которое он получает при search_params.set('param1', this.topic);, с другой частью кода все в порядке. все работает нормально. Вы можете попробовать это здесь http://jsfiddle.net/6gk13sep/1/

Для тех, кто интересуется, каким должен быть выход, когда вы пытаетесь нажать другую кнопку, приложение должно повторно запросить API с название этой кнопки

 Vue.component('child', {
  template: `
  <div>
  breedKey: {{ breedKey }}
  <br />
  topic: {{ this.topic }}
  <br />
  API DATA TEST: {{ this.point0 }}
  </div>
  `,
  props: ["breedKey", "time"],
  computed: {
    topic() {
      return this.breedKey;
    }
  },

  data() {
    return {
      point0: [],
      point1: [],
      point2: [],
    };
  },

  async created() {

    try {

      var url = new URL('https://www.mustavi.com/TimeSeries/?param1=China&param2=00');
      var search_params = url.searchParams;

      // new value of param set to my topic
      search_params.set('param1', this.topic);

Answer 1

Вы вызываете API только в created. Обновления вашего реквизита не вызовут его снова.

Вам нужно посмотреть breed и выполнить вызов API в методе watch.

watch: {
  async breedKey (oldVal, newVal) {
     // created method code
  }
}

I Вы обновили скрипку , чтобы увидеть, как это работает.

Answer 2

просто добавьте v-if = "breedKey" в дочерний компонент, чтобы решить вашу проблему. как показано ниже:

<child v-if="breedKey" v-bind:breed-key="breedKey" v-bind:time="time"> </child>

причина в том, что когда был вызван хук "созданного" дочернего компонента, topi c (breedKey) из родительского компонента еще не получил свое значение. Директива v-if делает дочерний компонент ленивым init до тех пор, пока "breedKey" не получит его значение от родительского компонента.

см .: http://jsfiddle.net/yangjunjun/z49wak5v/1/