alpineJS的todoList实战fetch、post/get方法

```
{extend name="public:adminbase" /}

{block name="content"}
<script defer src="{:config('web.cdn')}/static/admin/js/alpine.min.js"></script>

<div class="row" x-data="todoList()" x-init="todoListInit()">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header"><h4>TodoList</h4></div>
                <div class="card-body">
                    <div class="input-group m-b-10">
                        <input x-model="title" x-on:keydown.enter="createTodoList()" type="text" class="form-control"
                               placeholder="请输入代办事项" aria-describedby="basic-addon2">
                        <span class="input-group-addon btn" id="basic-addon2" @click="createTodoList()">回车立即添加</span>
                    </div>

</div>
            </div>

</address>
                    </div>
                </div>
            </template>

</div>
    </div>

</div>

{include file="public/afooter"}

//定义初始化函数 myFunInit
    function todoList() {
        return {
            title: '',
            list: {
                "name": "chushihua"
            },
            current_page:1,
            total:'',
            per_page:'',
            last_page:'',
            //定义 x-init 的初始化函数
            todoListInit() {
                console.log('this.current_page',this.current_page)
                fetch(url+`?page=`+this.current_page,
                    {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }
                )
                    .then(response => response.json())
                    .then(data => {
                        this.list = data.data
                        this.current_page = data.current_page
                        this.last_page = data.last_page
                    })
            },
            createTodoList() {
                if (this.title.length == 0) {
                    return false;
                }
                let data = {
                    "title": this.title
                }
                    fetch(createUrl,
                        {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(data)
                        }
                    )
                    .then(response => response.json())
                    .then(data => {
                        if (data.code == 200) {
                            success(data.msg);
                            this.list.unshift({
                                "content": this.title,
                                "status" : 0
                            })
                            this.title = ''
                        } else {
                            error(data.msg)
                        }
                    })
            },
            /**
             * 修改事项的状态
             * @param item
             */
            changeItem(item){
                let postData = {
                    "id":item.id,
                    "status": item.status == 0 ?1:0
                }

fetch(changeItemUrl,
                    {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(postData)
                    }
                )
                    .then(response => response.json())
                    .then(data => {
                        if (data.code == 200) {
                            item.status = postData.status
                        } else {
                            error(data.msg)
                        }
                    })

},
            prePage(){
                this.current_page--
                if(this.current_page <= 1){
                    this.current_page = 1;
                }
                this.todoListInit()
            },
            nextPage(){
                this.current_page++
                if(this.current_page > this.last_page){
                    this.current_page = this.last_page
                }
                this.todoListInit()
            }
        }
    }
</script>

{/block}
```

注:原创不易,转载请注明出处( https://micuu.com/new/3100.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

alpineJS的todoList实战fetch、post/get方法

留言反馈