Alpine JS - Showing item twice when declaring only one

Question

I have a Blade template in Laravel that uses Alpine JS.

I have a questions array that gets initialized with only one element, but for some reason there are two elements on screen.

What can be wrong?

Here's the code I'm using:

<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>

And here's the screenshot:

With the code you posted, only one item is displayed for me. Do you initialize the array differently in your actual code? I see other possible problems not related to the malfunction you described. — TUPKAP
– TUPKAP, Commented Dec 28, 2024 at 2:29

Olumuyiwa · Accepted Answer · 2024-12-27 23:02:31Z

1

There are a number of possible reasons. 1.) check that you are not including alpineJs script multiple times by chance. 2.) include defer keyword in your alpineJs script as seen from this solution here

answered Dec 27, 2024 at 23:02

Olumuyiwa

4081 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felipe Peña Dec 28, 2024 at 6:12

Thanks! I was importing it twice from <script> and package.json.

Collectives™ on Stack Overflow

Alpine JS - Showing item twice when declaring only one

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related