为什么 prop 数据在 vue 模板中更新，而不是在 javascript 部分

Question

我在模板部分的 {{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

只需在子组件中添加 v-if="breedKey" 即可解决您的问题。如下图：

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

原因是调用子组件"created"钩子时，父组件的topic(breedKey)还没有获取到它的值。 v-if 指令使子组件延迟初始化，直到 "breedKey" 从父组件获取它的值。

参见：http://jsfiddle.net/yangjunjun/z49wak5v/1/

Answer 2

您只调用了 created 中的 API。更新您的道具不会再次触发它。

您需要 watch breed 并在监视方法中进行 API 调用。

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

我已经更新了您的 fiddle 以查看此功能。

为什么 prop 数据在 vue 模板中更新，而不是在 javascript 部分

Why prop data update in vue template, but not in javascript part

javascript

components

prop

vue.js