The topic in the template section updates when its value in the parent component changes, however, the same value in the script part remains the initial value it received at
search_params.set('param1', this.topic);If you're curious about the expected output, pressing the other button should prompt the app to re-request the API with that button's name
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¶m2=00');
var search_params = url.searchParams;
// new value of param set to my topic
search_params.set('param1', this.topic);