Simple vue resourse takes json and applies it to the template example
- 2021-07-18 07:04:33
- OfStack
Don't talk nonsense on the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue js</title>
<style>
.completed {
text-decoration: line-through;
}
.something {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div id="app">
<task-app :list="tasks">
</task-app>
</div>
<template id="task-template">
<ul>
<li v-for="task in list">
{{ task.id }} | {{ task.author }} | {{ task.name }} | {{ task.price }}
</li>
</ul>
</template>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
Vue.component('task-app', {// Label to apply
template: '#task-template',// Template id
props: ['list']// Requested json
})
</script>
<script>
var demo = new Vue({
el: '#app',
data: {
tasks: '' // Is empty, it can be null
},
ready: function() {
this.getCustomers()
},
methods: {
getCustomers: function() {
this.$http.get('resourse.json')
.then(function(response) { //response Pass parameter, which can be any value
this.$set('tasks', response.data)
})
.catch(function(response) {
console.log(response)
})
}
}
})
</script>
</body>
</html>