Breaking News: Grepper is joining You.com. Read the official announcement!

alpine js repeater

Hosam Aldeen answered on August 9, 2022 Popularity 6/10 Helpfulness 10/10

answer alpine js repeater

related alpine js repeat

alpine js repeater

Comment

<div x-data="newEvent()" class=' w-50' >
    <template x-for="(field, i) in fields" :key="i"  >        
        <div class='row m-0 mb-1'>
            <div class='col-11'>
               <input type="hidden" 
                    :name="`values[${i}][id]`" 
                    x-model='field.id'>

                <input  x-model="field.name"
                class="form-control d-inline-block"
                :name="`values[${i}][name]`"
                />         
            </div>
            <div class='col-1'>
                <button type="button" class='btn btn-danger'
                    @click.prevent="removeField(i)">&times;</button>        
            </div>
        </div>
    </template>
	<button type="button" class="btn btn-success" @click.prevent="addNewField()">+</button>


<script>
    function newEvent() {
        return {
            fields: [[]],
            addNewField() {
                this.fields.push({});
            },
            removeField(index) {
                this.fields.splice(index, 1);
            }
        }
    }
</script>

</div>

Popularity 6/10 Helpfulness 10/10 Language javascript

Source: Grepper

Tags: javascript repeater

Link to this answer
Share Copy Link

Contributed on Aug 09 2022

Hosam Aldeen

0 Answers Avg Quality 2/10

Closely Related Answers

alpine js repeat

Comment

<div x-data="newEvent()" class=' w-100' >
    <template x-for="(field, i) in fields" :key="i"  >
        <div class='row m-0 mb-1'>
            <div class='col-4'>
                <label for="">Title</label>
                <input x-model="field.title" :name="`images[${i}][title]`"
                    class="form-control d-inline-block" />
            </div>
            <div class='col-4'>
                <label for="">Link</label>
                <input x-model="field.link" :name="`images[${i}][link]`"
                    class="form-control d-inline-block" />
            </div>
            <div class='col-3'>
                <input type="hidden" :name="`images[${i}][image]`" x-model='field.image'>

                <label for="">Image</label>
                <input type="file" :name="`images[${i}][image]`"
                    class="form-control alpin-image">

                <img :src='`../uploads/${field.image}`' width='100' >

            </div>


            <div class='col-1'>
                <button type="button" class='btn btn-danger' style='margin-top: 29px;'
                    @click.prevent="removeField(i)">&times;</button>
            </div>
        </div>
    </template>
    <div class='row m-0 mb-1'>
        <div class='col-4'>
            <button type="button" class="btn btn-success" @click.prevent="addNewField()">+</button>
        </div>
    </div>

@push('footer')
@php
    $values = (is_array($model->images) && !empty($model->images))?$model->images:[[]];
@endphp
<script>
    function newEvent() {
        return {
            fields: @json($values),
            addNewField() {
                this.fields.push({});
            },
            removeField(index) {
                this.fields.splice(index, 1);
            }
        }
    }

    $(document).on('change', '.alpin-image', function() {
        var me = $(this) ;
        var file = $(this).get(0).files[0];
        console.log(file);
        if(file){
            var reader = new FileReader();
            reader.onload = function(){
                me.parent().find('img').attr("src", reader.result);
            }

            reader.readAsDataURL(file);
        }
    })

</script>
@endpush

</div>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript repeat

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Hosam Aldeen

0 Answers Avg Quality 2/10

alpine js repeater

Contents

More Related Answers

alpine js repeater

Closely Related Answers

alpine js repeat

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.