Question

任何人都知道如何这样做? 我的母体为<代码>x-data=“check BoxHandler”。

<条码>x-data本身正在发挥作用,但我无法按要求提交。

《联合材料》的错误是,任何类型都没有长度。

我知道,在Alpine仓库中,你可以做像我下面尝试的那样做些事情,但它没有数据。

任何帮助都是令人吃惊的。

<input type="button"
           value="Submit"
           hx-get= /example
           hx-target="#hx_modal_container"
           hx-vals= js:{"total": Alpine.$data( checkboxHandler ).checkedValues.length}  # This is the line that is not working
/>

×数据

document.addEventListener( alpine:init , () => {
            Alpine.data( checkboxHandler , () => ({
                checkedValues:[],
                selectAll: false,
                total(){this.checkedValues.length},
                addAll() {
                    this.selectAll=true
                    const allPageValues=JSON.parse(document.getElementById( all_rows_ids ).textContent)
                    this.checkedValues=[]
                    this.checkedValues.push(...allPageValues.map(value => value.toString()))
                    this.checkedValues.push( all )
                 },
                 removeAll() {
                    this.selectAll=false
                    const allPageValues=JSON.parse(document.getElementById( all_rows_ids ).textContent)
                    this.checkedValues = this.checkedValues.filter(value => !allPageValues.map(value=>value.toString()).includes(value))
                    const index= this.checkedValues.indexOf( all )
                    this.checkedValues.splice(index, 1);
                 }
     
                
            }))
           
        })

Answer 1

类似情况:

<input type="button"
           value="Submit"
           hx-get="/example"
           hx-target="#hx_modal_container"
           x-bind:hx-vals="JSON.stringify({"total": Alpine.$data( checkboxHandler ).checkedValues.length})"
/>

Answer 2

您必须使用<<>AlpineJS 贮藏<>m>与联合材料共享数据:

<div>
    <input type="button"
           value="Submit"
           hx-get="/example"
           hx-target="#hx_modal_container"
           hx-vals="js:{total: Alpine.store( checkedValues ).length}"
    />

</div>

<script>

    document.addEventListener( alpine:init , () => {

        Alpine.store("checkedValues", []);

        Alpine.data("checkboxHandler", () => ({

            selectAll: false,
            total(){this.$store.checkedValues.length},

            addAll() {
                this.selectAll=true
                const allPageValues=JSON.parse(document.getElementById( all_rows_ids ).textContent)
                this.$store.checkedValues=[]
                this.$store.checkedValues.push(...allPageValues.map(value => value.toString()))
                this.$store.checkedValues.push( all )
            },

            removeAll() {
                this.selectAll=false
                const allPageValues=JSON.parse(document.getElementById( all_rows_ids ).textContent)
                this.$store.checkedValues = this.$store.checkedValues.filter(value => !allPageValues.map(value=>value.toString()).includes(value))
                const index= this.$store.checkedValues.indexOf( all )
                this.$store.checkedValues.splice(index, 1);
            }
        }))

    })

</script>

The checkedValues variable is now placed into the store.
Inside the Alpine object it is accessed via the magic property $store, while in the JS (htmx here) is accessed using the Alpine.store() function

友情链接