CODEWITHSUNDEEP
vue.jsvuejs2
Success
Success

Reputation: 35

Display JSON data in dialog with Vue.js

Using Vue.js, how do you use axios GET to display the response in a dialog?

I've tried the following:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <template>
        <label>Protocol</label> Display protocol details from json
        <div class="text-xs-center">
            <br>
        </div>
    </template>
<script>
export default {
    dialog3: false
    created() {
        let self = this
        axios.get('http://localhost:4000/ap/device')
            .then(function(response) {
                self.fDModelName(response.data.result)
                console.log(JSON.stringify(response.data.result))
            })
    },
    methods: {
        fDModelName: function(message) {
            console.log("inside")
        }
    }
}
</script>
</body>
</html>

Upvotes: 0

Views: 9478

Answers (1)

Akshay Suresh
Akshay Suresh

Reputation: 413

Create a data object where you have content as a key. On component created, you can assign it to the component's content value.

<template>
    <div>
        {{ content }}
    </div>
</template>

<script>
export default {
    data () {
        return {
            content: []
        }
    },
    created () {
        axios.get('http://localhost:4000/ap/device')
            .then(function (response) {
                this.content = response.data.result   
            })
    }
}
</script>

Upvotes: 3

Related Questions