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

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

​

​

​

​

// app.component.ts

import { Component, OnInit } from '@angular/core';

import { UserService } from './user.service';

​

@Component({

  selector: 'app-root',

  template: `<ul><li *ngFor="let user of users">{{ user.name }}</li></ul>`,

})

export class AppComponent implements OnInit {

  users: any[] = [];

​

  constructor(private userService: UserService) {}

​

  ngOnInit() {

    this.userService.getUsers().subscribe((data) => (this.users = data));

  }

}

​

<!-- app.component.html -->

<input [(ngModel)]="name" placeholder="Enter your name" />

<p>Hello, {{ name }}!</p>

------------------------------------------------------------------------

// app.component.ts

import { Component } from '@angular/core';

​

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

})

export class AppComponent {

  name: string = '';

}

​

​