为什么在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

您只是在created中调用API。道具更新不会再次触发。

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

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

我已经更新了你的小提琴，让它发挥作用。

Answer 2

只需将v-if="breedKey"添加到子组件即可解决您的问题。如下所示：

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

原因是当调用子组件"created"钩子时，父组件中的主题(breedKey(还没有得到它的值。v-if指令使子组件惰性初始化，直到"breedKey"从父组件获得它的值。

请参阅：http://jsfiddle.net/yangjunjun/z49wak5v/1/