Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<input v-model="myinput">
<v-app>
<v-toolbar dense dark color="blue darken-2">
<v-toolbar-side-icon disabled></v-toolbar-side-icon>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>file_download</v-icon>
</v-btn>
<v-btn icon>
<v-icon>edit</v-icon>
</v-btn>
</v-toolbar>
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs12 v-for="(item, index) in list" :key="index">
<v-card>
<v-card-text class="grey--text">
{{item}}
</v-card-text>
<v-card-actions>
</v-card-actions>
</v-card>
</v-flex>
<div v-for="item in list2.contributors">
{{item}}
</div>
</v-layout>
</v-container>
<v-btn @click="loadData()">Load data</v-btn>
</v-app>
</div>
<script>
const vueapp = new Vue({
el: '#app',
data: {
myinput: "a,b,c",
list2: "Loading ..."
},
computed: {
list() {
return this.myinput.split(",")
}
},
methods: {
async loadData() {
const resp = await axios("http://localhost:5000/package.json")
this.list2 = resp.data
}
}
})
vueapp.loadData()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.