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

мой {{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);

javascript vue.js components prop
person Charlie    schedule 14.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

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

person Radu Diță    schedule 14.04.2020
comment
Почему это отклонено? Это в основном правильный ответ! Вам, конечно, нужно смотреть breedKey - person Matthias S; 14.04.2020

arrow_upward
0
arrow_downward

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

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

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

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

person xngiser    schedule 14.04.2020
comment
о, спасибо за ваше редактирование, но моя настоящая цель - когда я нажимаю кнопку с другим именем, он повторно отправляет API с этим именем кнопки, API в этом редактировании остается прежним, когда я нажимаю кнопку - person Charlie; 14.04.2020