I can be sure based on the code you have shared, but for a guest is there an access token in localStorage? if no, then /api/auth/get_family_members_byid/${member_profile.member_unique_id}?token=${access_token} will fail. If this is the issue then you should probably have a different API route for guests which isn't authenticated
Apr 3, 2023
1
Level 1
If i add this in my code than data not showing for guest users - vue js
i have one vue js code where all data are come from backend api. firstly data not showing for guest users after that i some modiy the code data are showing for guest. now i add one another api for fetch family member data but when i run this again data not showing for guest users. if i remove that api code than data are showing. how can i fix it. if user are guest than this skip so data are showing to user.
<div
class="row px-5 mt-3"
v-if="member_profile.family_members === true"
>
<div class="col-md-4 float-left d-flex align-items-center">
<label for="height" class="m-0 f12 font-weight-bold"
>Family Member Name</label
>
</div>
<div class="col-md-8 float-left">
<select class="form-control" v-model="member_concern">
<option value="" disabled selected>
Select Member Name
</option>
<option
v-for="member in members"
:key="member.id"
:value="`${member.first_name} ${member.last_name}`"
>
{{ member.first_name }} {{ member.last_name }}
</option>
<!-- Add more options as needed -->
</select>
<span
v-if="member_concernError"
class="error-message text-danger"
>{{ member_concernErrorText }}</span
>
</div>
mounted() {
this.fetchMembers();
},
methods: {
fetchMembers() {
console.log("fetchMembers() called"); // Log a message to the console to verify that the method is being called
let member_profile = JSON.parse(localStorage.getItem("member_profile"));
let access_token = localStorage.getItem("access_token");
let endpointUrl = `/api/auth/get_family_members_byid/${member_profile.member_unique_id}?token=${access_token}`;
fetch(endpointUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
console.log(response);
if (response.ok) {
return response.json();
} else {
throw new Error(
`API request failed with ${response.status} ${response.statusText}`
);
}
})
.then((data) => {
console.log(data);
if (data.success === true) {
this.members = data.data;
console.log(this.members);
if (this.members.length === 0) {
console.warn("No family members found.");
}
} else {
console.error("API request failed:", data);
}
})
.catch((error) => {
console.error("API request error:", error);
});
},
Please or to participate in this conversation.