ผมขอสอบถามการทำวนลูปใน Vue.js จากข้อมูลที่ได้รับมาเป็น json หน่อยนะครับ ผมเขียนแบบนี้แล้วมันแสดงมาแค่ แถวเดียว ต้องทำยัง

แลกเปลี่ยนประสบการณ์และ ปัญหาการใช้งาน Mobile การพัฒนา App บน SmartMobile , tablet Android, iOS, Window Phone และ ฯลฯ

Moderators: mindphp, ผู้ดูแลกระดาน

Sukitti Tongsri
PHP Newbie
PHP Newbie
Posts: 1
Joined: 24/09/2019 3:09 pm

ผมขอสอบถามการทำวนลูปใน Vue.js จากข้อมูลที่ได้รับมาเป็น json หน่อยนะครับ ผมเขียนแบบนี้แล้วมันแสดงมาแค่ แถวเดียว ต้องทำยัง

Post by Sukitti Tongsri » 24/09/2019 3:27 pm

Code: Select all

<template>
    <Page class="page" backgroundColor="#FFEFD5">
        <ScrollView>
            <StackLayout class="home-panel">
                <StackLayout class="form">
                    <TextField v-model="stdCode" text="stdCode" hint="รหัสนักศึกษา..."
                        class="input input-border" backgroundColor="#E0FFFF" />
                    <Button text="Search" @tap="sCode" width="40%" height="50"
                        backgroundColor="#FFCCCC" />
                    <Label :text="item" v-for="item in mygrade" />
                </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import * as appSettings from "tns-core-modules/application-settings";
    export default {
        methods: {
            onGoBake() {
                this.$navigateBack();
            },
            sCode() {
                let postdata = {
                    secure: this.secure,
                    stdCode: this.stdCode
                };
                fetch(this.apiUrl + "Gradelist.php", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(postdata)
                    })
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(myRes) {
                        console.log(myRes);
                        if (myRes.status == "1") {
                            let mygrade = {
                                fname: myRes.stdFName,
                                lname: myRes.stdLName,
                                sname: myRes.subjDescription,
                                grade: myRes.grdGrade,
                                msg: myRes.msg
                            };
                            appSettings.setString(
                                "mygrade",
                                JSON.stringify(mygrade)
                            );
                        } else {
                            alert(mygrade.msg);
                        }
                    });
            }
        },
        data() {
            return {
                secure: "99999",
                apiUrl: "http://1.179.146.156/com51/6132040011/",
                mygrade: JSON.parse(appSettings.getString("mygrade"))
            };
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>
*******************อันนี้เป็นข้อมูลที่ต้องการนำมาแสดงทั้งหมดครับ****************************

[
{
"status": "1",
"stdCode": "6132040001",
"stdFName": "กลทีป์",
"stdLName": "ขวัญเจริญ"
},
{
"status": "1",
"stdCode": "6132040002",
"stdFName": "โกศล",
"stdLName": "ภูมิไสว"
},
{
"status": "1",
"stdCode": "6132040003",
"stdFName": "คัมภีรภาพ",
"stdLName": "เสวตวงษ์"
},
{
"status": "1",
"stdCode": "6132040004",
"stdFName": "ชินราช",
"stdLName": "สายสร้อย"
}
]
*******************อันนี้เป็นข้อมูลที่ต้องการนำมาแสดงทั้งหมดครับ****************************
ที่ผมทำแสดงผลออกมาแค่
1
6132040001
กลทีป์
ขวัญเจริญ

แต่ผมต้องการของตุณคน ต้องทำยังไงครับ รบกวนด้วยครับ ขอบตุณครับ


Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Mobile Programming - Android, iOS, Window Phone”

Who is online

Users browsing this forum: No registered users and 3 guests