Hey there!
I creating a simple Vue.js Klaivyo subscribe component that has worked for me in the past.. However recently I have not been seeing any new profiles added to my newsletter despite retrieving a successful API request (the network console shows a successful Status Code: 200).
Here is my Vue component (it uses the klaviyo-subscribe repo from Github that uses the https://manage.kmail-lists.com/ajax/subscriptions/subscribe):
<template>
<div class="klaviyo-newsletter">
<h4>{{ title }}</h4>
<p>{{ text }}</p>
<form aria-label="Newsletter Signup" class="klaviyo-newsletter__form">
<input
type="email"
name="user[email]"
v-model="email"
aria-label="Enter your email address"
placeholder="Email"
autocapitalize="off"
autocomplete="email"
autocorrect="off"
required
/>
<button type="button" @click="submit">
<span>{{ isSending === true ? 'Sending...' : 'Send' }}</span>
</button>
</form>
</div>
</template>
<script>
import { subscribe } from 'klaviyo-subscribe'
export default {
name: 'KlaviyoSubscribe',
props: {
title: {
type: String,
default: 'Newsletter'
},
text: {
type: String,
default: ''
},
listId: {
type: String,
default: ''
}
},
data() {
return {
errorMessage: false,
isSending: false,
email: ''
}
},
methods: {
async submit() {
this.isSending = true
try {
const response = await subscribe(this.listId, this.email)
if (response.success) {
this.isSending = false
this.$emit('handleSuccess')
this.email = ''
} else {
throw new Error(response.message)
}
} catch (error) {
this.isSending = false
this.errorMessage = error.message
console.error(error)
}
}
}
}
</script>
And here is the successful network response within the console:
Request URL: https://manage.kmail-lists.com/ajax/subscriptions/subscribe
Request Method: POST
Status Code: 200 OK
Remote Address: 54.234.26.4:443
Referrer Policy: strict-origin-when-cross-origin
I am completely lost as to why I cant see any emails/user-profiles within my newsletter dashboard when I am testing this despite getting a successful request?
Any help would be AMAZING! Thanks!