Tenho um modelo Blade no Laravel que usa Alpine JS.
Tenho uma questionsmatriz que é inicializada com apenas um elemento, mas por algum motivo há dois elementos na tela.
O que pode estar errado?
Aqui está o código que estou usando:
<x-guest-layout>
<x-slot:title>
{{ __('survey.create.title') . ' - '. config('app.name', 'Riview') }}
</x-slot>
<div class="pb-6">
<h2>
{{ __('survey.questions.title') }}
</h2>
<h3>
{{ $survey->name }}
</h3>
<form action="{{ route('survey.questions.store', $survey) }}" method="post" x-data="{
questions: [{
content: '',
type: 'text'
}],
addQuestion() {
this.questions.push({
content: '',
type: 'text'
})
},
removeQuestion(index) {
this.questions.splice(index, 1)
}
}">
@csrf
<div class="mb-4">
<template x-for="(question, index) in questions" :key="index">
<div class="form-group py-4">
<div class="flex justify-between mb-2 items-center">
<h3>Question #<span x-text="index + 1"></span></h3>
<button x-show="questions.length > 1" type="button" class="btn btn-link" x-on:click="removeQuestion(index)">Remove</button>
</div>
<div class="mb-3">
<label :for="'question_'" x-bind:for="'question_' + index">Title</label>
<input type="text" x-model="question.content"
:name="'questions['+index+'][content]'"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div>
<label :for="'question'" x-bind:for="'question[' + index + '][type]'">Question Type</label>
<select class="select select-bordered w-full" x-model="question.type"
x-bind:name="'questions['+index+'][type]'">
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option value="text">Text</option>
<option value="textarea">Long Text</option>
<option value="radio">Multiple Choice</option>
<option value="checkbox">Checkboxes</option>
</select>
</div>
</div>
</template>
</div>
<div class="mb-4">
<button type="button" class="btn btn-accent" x-on:click="addQuestion">
+ Add Another Question
</button>
</div>
<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</x-guest-layout>
E aqui está a captura de tela:
