alpine Infinite append data

[chovYena]

I load alpine pages in a page by pajax

alpine page like this ：

`

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('uploadRefData', () => ({
            uploadUrl: '{:U(\'Home/uploadMedia/dropzone\')}',
            loading: false,
            modalOpen: false,
            previewImg: '',
            files: [],
            selectFile(e){
                const { files } = e.target
                this.loading = true
            },
            init(){
                const fileList = [files] || []
                this.files = fileList.map(item=>{
                    if (!item?.url){
                        return {
                            name: item,
                            url: item,
                            type: 'application'
                        }
                    } else {
                        return item
                    }
                })
            },
            destroy() {
                this.files = []
            },
        }))
    })
</script>

`

when load alpine page first and close everything's fine

repeated operation

init() was triggered twice. files added first and second data

repeated operation ...

files Infinite Append Data

I guess that multiple alpines share the same data.

How do I deal with this problem, alpine doesn't seem to have a clear way

[ekwoka]

You just have syntax issues wrong.

const fileList = [files] || []

This is definitely not right. I don't know what you're trying to have it do, I just know this is wrong.

Similarly

const { files } = e.target

These are both wrong. I can't tell how its causing what you describe, but they definitely do not work.

This code definitely does nothing useful like this.

[chovYena]

[files] It's actually a template syntax By php

This is the actual rendering of the data.

const fileList = [{name: 'tom'}] || []

It's all normal.

I render alpine pages in a modal by pajax in my home page

When I turn on modal, php passes different variables to fileList

when repeated operation

fileList Content is not what I am passing

I think there's a global alpine when you load the alpine page. When I repeatedly load different alpine pages, the data of the global alpine is contaminated

This may be a problem with the cdn instance, But at the moment I don't have a better choice. It's not a npm project

[ekwoka]

but what about this

selectFile(e){
                const { files } = e.target
                this.loading = true
            },

There's nothing you show here that would contaminate anything. It would require there being something else.

[SimoTod]

I think that the problem is that you are loading a new version of Alpine on each ajax request so you are just duplicating everything with each ajax call. You don't have to. Just load it one at the beginning in your page. In the subsequent html you inject, you don't need to wait for alpine init, the browser will just parse your script and Alpine at that point is already available.

[chovYena]

Thank you very much for your reply

For various reasons alpine seemed unable to do what I expected

If I introduce alpine on the home page，but load page x-for such directive will invalid

Eventually I gave up and use of vue

window.Alpine = new Vue({})

😭

[ekwoka]

Why would it be invalid?

Oh, because you're inlining the script with dynamic data.

Just put the dynamic data in the expression instead of the script.