Clash Royale CLAN TAG#URR8PPP

Computed Getter causes maximum stack size error

I'm trying to implement the following logic in Nuxt:

The issue I'm currently stuck with is that the getUrl getter method in the store is called repeatedly until the maximum call stack is exceeded and I can't work out why. It's only called from the computed function in the page, so this implies that the computed function is also being called repeatedly but, again, I can't figure out why.

In my Vuex store index.js I have:

export const state = () => (
appointments:
)

export const mutations =
SET_APPT: (state, appointment) =>
state.appointments[appointment.id] = appointment.url



export const actions =
async setAppointment ( commit, state , id)
try
let result = await axios.get('https://externalAPI/' + id,
method: 'GET',
protocol: 'http'
)
return commit('SET_APPT', result.data)
catch (err)
console.error(err)




export const getters =
getUrl: (state, param) =>
return state.appointments[param]




In my page component I have:

<template>
<div>
<section class="container">
<iframe :src="url"></iframe>
</section>
</div>
</template>

<script>
export default {
computed:
url: function ()
let url = this.$store.getters['getUrl'](this.$route.params.id)
return url;


</script>


The setAppointments action is called from a separate component in the page that asks the user for the ID via an onSubmit method:

data()
return
appointment: this.appointment ? ...this.appointment :
id: '',
url: '',
,
error: false

,
methods: {
onSubmit()
if(!this.appointment.id)
this.error = true;

else
this.error = false;
this.$store.dispatch("setAppointment", this.appointment.id);
this.$router.push("/search/"+this.appointment.id);




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.