How can I access response in data function from methods?
this won't work in this case, this will only get me access to a methods scope property:
<script>
export default {
data: function () {
return {
prompt: '',
response: '',
show: false
}
},
methods: {
getResponse: function () {
let text
const data = {
prompt: this.prompt,
temperature: 0.5,
max_tokens: 64,
top_p: 1.0,
frequency_penalty: 0.0,
presence_penalty: 0.0,
}
fetch("https://api.openai.com/v1/engines/text-curie-001/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.VUE_APP_OPENAI_SECRET}`,
},
body: JSON.stringify(data),
})
.then (response => {
if (response.ok) {
return response.json()
}else{
throw new Error('We got an error')
}
})
.then (result => {
text = result.choices[0].text
console.log(text)
})
.catch( (err) => {
console.log('ERROR:', err.message)
})
this.response = text
}
}
}
</script>
Something like this should work
<template>
<div>
<pre>{{ response }}</pre>
<button @click="getResponse">call it</button>
</div>
</template>
<script>
export default {
data() {
return {
prompt: '',
response: '',
}
},
methods: {
async getResponse() {
const data = {
prompt: this.prompt,
temperature: 0.5,
max_tokens: 64,
top_p: 1.0,
frequency_penalty: 0.0,
presence_penalty: 0.0,
}
try {
const response = await fetch(
'https://api.openai.com/v1/engines/text-curie-001/completions',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.VUE_APP_OPENAI_SECRET}`,
},
body: JSON.stringify(data),
}
)
if (response.ok) {
const result = await response.json()
this.response = result.choices[0].text
}
} catch (err) {
throw new Error('We got an error', err)
}
},
},
}
</script>