在vue js中的对话框中显示json数据

时间:2018-05-24 10:35:54

标签: vue.js vuejs2

im newBie in vue js.Im试图从axios.get显示数据并尝试在对话框中显示它。但是我无法做到这一点。亲切的帮助。下面是我的代码。

     <template>
     <v-dialog v-model="dialog3" max-width="500px">
                  <v-layout wrap>
                  <v-flex xs12 sm6 md4>
                  <label>Protocol</label>
                      <v-subheader>Display protocol details from json</v-subheader>

                </v-flex>    
              </v-layout>
        </v-dialog> 


        <div class="text-xs-center" v-for="chip in chips"">
                    <v-chip v-model="chip" close  v-on:click="dialog3 = true" v-if="chip=== true">                 
    <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>

1 个答案:

答案 0 :(得分:2)

创建一个数据对象,其中您将内容作为键。在创建的组件上,您可以将其分配给组件的内容值。

<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>