Help me bij het maken van een Vue.js component dat integreert met een aangepaste API voor gebruikersfeedback.
description
Door deze gids te volgen, creëer je een responsief feedbacksysteem dat de gebruikersbetrokkenheid verhoogt, de communicatie verbetert en helpt waardevolle inzichten van gebruikers te verzamelen.
prompt
try_prompt
Help me een Vue.js component bouwen dat gebruikers toestaat feedback in te dienen via een aangepaste API. Leg uit hoe je de API-verbinding opzet, gebruikersinput behandelt ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een voorbeeld van hoe je een Vue.js component kunt bouwen dat gebruikers feedback laat indienen via jouw API.
### Stap 1: Basic component structuur
```vue
<template>
<div>
<h2>Feedback indienen</h2>
<form @submit.prevent="submitFeedback">
<div>
<label for="naam">Naam:</label>
<input type="text" id="naam" v-model="naam" required />
</div>
<div>
<label for="bericht">Bericht:</label>
<textarea id="bericht" v-model="bericht" required></textarea>
</div>
<button type="submit">Verzenden</button>
</form>
<!-- Feedback berichten -->
<div v-if="succesMsg" class="succes">{{ succesMsg }}</div>
<div v-if="foutMsg" class="fout">{{ foutMsg }}</div>
</div>
</template>
<script>
export default {
data() {
return {
naam: '',
bericht: '',
succesMsg: '',
foutMsg: ''
};
},
methods: {
async submitFeedback() {
// API endpoint
const apiUrl = 'https://api.example.com/feedback';
// Gegevens die je verstuurt
const feedbackData = {
naam: this.naam,
bericht: this.bericht,
feedbacktype: 'opmerkingen'
};
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(feedbackData)
});
if (!response.ok) {
// Fout bij de API-aanroep
throw new Error('Fout bij het indienen van feedback.');
}
const result = await response.json();
// Optioneel: controleer op API-specifieke success-criteria
if (result.success) {
this.succesMsg = 'feedback succesvol verzonden!';
this.foutMsg = '';
// Reset het formulier
this.naam = '';
this.bericht = '';
} else {
throw new Error(result.message || 'Onbekende fout.');
}
} catch (error) {
this.foutMsg = error.message;
this.succesMsg = '';
}
}
}
};
</script>
<style>
.succes {
color: groen;
}
.fout {
color: rood;
}
</style>
```
### Uitleg
- **API-verbinding opzetten:**
Gebruik `fetch()` met `POST` methode, stuur JSON data naar `https://api.example.com/feedback`.
Zorg voor `Content-Type: application/json` in de headers.
- **Gebruikersinput behandelen:**
`v-model` bindt de inputvelden aan data-eigenschappen (`naam`, `bericht`).
Bij submit wordt de `submitFeedback()` methode aangeroepen.
- **Success- en foutmeldingen:**
Op succesvolle indiening wordt `succesMsg` getoond en het formulier gereset.
Bij fouten wordt `foutMsg` getoond.
De berichten worden conditioneel weergegeven met `v-if`.
### Opmerking
Pas eventueel de controle op success (`result.success`) aan op basis van de API-respons.
provider: deepseek
model: deepseek-chat
Ik help je graag een Vue.js component te bouwen voor feedback. Hier is een complete implementatie:
## 1. Basis Vue Component Structuur
```vue
<template>
<div class="feedback-form">
<h2>Laat je feedback achter</h2>
<form @submit.prevent="submitFeedback">
<!-- Naam invoerveld -->
<div class="form-group">
<label for="naam">Naam:</label>
<input
type="text"
id="naam"
v-model="feedback.naam"
required
class="form-input"
placeholder="Je naam"
/>
</div>
<!-- Bericht invoerveld -->
<div class="form-group">
<label for="bericht">Bericht:</label>
<textarea
id="bericht"
v-model="feedback.bericht"
required
rows="4"
class="form-input"
placeholder="Je opmerkingen..."
></textarea>
</div>
<!-- Indieningsknop -->
<button
type="submit"
:disabled="isSubmitting"
class="submit-btn"
>
{{ isSubmitting ? 'Versturen...' : 'Feedback Versturen' }}
</button>
<!-- Meldingen -->
<div v-if="successMessage" class="success-message">
{{ successMessage }}
</div>
<div v-if="errorMessage" class="error-message">
{{ errorMessage }}
</div>
</form>
</div>
</template>
<script>
export default {
name: 'FeedbackForm',
data() {
return {
feedback: {
naam: '',
bericht: ''
},
isSubmitting: false,
successMessage: '',
errorMessage: ''
}
},
methods: {
async submitFeedback() {
// Reset vorige meldingen
this.successMessage = '';
this.errorMessage = '';
this.isSubmitting = true;
try {
// API call naar de feedback endpoint
const response = await fetch('https://api.example.com/feedback', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: 'opmerkingen',
naam: this.feedback.naam,
bericht: this.feedback.bericht
})
});
// Controleer of het verzoek succesvol was
if (response.ok) {
const result = await response.json();
this.successMessage = 'Bedankt voor je feedback!';
this.resetForm();
} else {
// Handle HTTP fouten
const errorData = await response.json();
this.errorMessage = errorData.message || 'Er ging iets mis bij het verzenden. Probeer het opnieuw.';
}
} catch (error) {
// Handle netwerk of andere fouten
this.errorMessage = 'Netwerkfout. Controleer je verbinding en probeer het opnieuw.';
console.error('Feedback submission error:', error);
} finally {
this.isSubmitting = false;
}
},
resetForm() {
this.feedback.naam = '';
this.feedback.bericht = '';
}
}
}
</script>
<style scoped>
.feedback-form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.form-input:focus {
outline: none;
border-color: #007bff;
}
.submit-btn {
background-color: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
}
.submit-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.submit-btn:hover:not(:disabled) {
background-color: #0056b3;
}
.success-message {
background-color: #d4edda;
color: #155724;
padding: 12px;
border-radius: 4px;
margin-top: 15px;
border: 1px solid #c3e6cb;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
padding: 12px;
border-radius: 4px;
margin-top: 15px;
border: 1px solid #f5c6cb;
}
</style>
```
## 2. Alternatieve implementatie met Axios (optioneel)
Als je Axios prefereert, installeer het eerst:
```bash
npm install axios
```
En gebruik deze aangepaste script sectie:
```javascript
<script>
import axios from 'axios';
export default {
name: 'FeedbackForm',
data() {
return {
feedback: {
naam: '',
bericht: ''
},
isSubmitting: false,
successMessage: '',
errorMessage: ''
}
},
methods: {
async submitFeedback() {
this.successMessage = '';
this.errorMessage = '';
this.isSubmitting = true;
try {
const response = await axios.post('https://api.example.com/feedback', {
type: 'opmerkingen',
naam: this.feedback.naam,
bericht: this.feedback.bericht
});
this.successMessage = 'Bedankt voor je feedback!';
this.resetForm();
} catch (error) {
if (error.response) {
// Server reageerde met een foutstatus
this.errorMessage = error.response.data.message || 'Serverfout. Probeer het later opnieuw.';
} else if (error.request) {
// Verzoek werd gemaakt maar geen reactie ontvangen
this.errorMessage = 'Geen reactie van de server. Controleer je internetverbinding.';
} else {
// Iets anders veroorzaakte de fout
this.errorMessage = 'Onverwachte fout opgetreden.';
}
} finally {
this.isSubmitting = false;
}
},
resetForm() {
this.feedback.naam = '';
this.feedback.bericht = '';
}
}
}
</script>
```
## Belangrijke punten:
1. **API Verbinding**: Gebruikt `fetch` of `axios` voor HTTP POST requests
2. **Gebruikersinput**: Two-way binding met `v-model` voor real-time updates
3. **Validatie**: HTML5 `required` attribuut voor basisvalidatie
4. **Statusbeheer**: `isSubmitting` voorkomt dubbele indieningen
5. **Foutafhandeling**: Behandelt zowel HTTP fouten als netwerkfouten
6. **Gebruikersfeedback**: Duidelijke succes- en foutmeldingen
7. **Toegankelijkheid**: Formulier wordt gereset na succesvolle indiening
Je kunt dit component gebruiken in je Vue applicatie door het te importeren en te registreren.