Skip to content

Instantly share code, notes, and snippets.

@jagroop

jagroop/computed_properties.html

Created July 5, 2019 06:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jagroop/edcf0708c74709c620f5642910c66c48 to your computer and use it in GitHub Desktop.
Save jagroop/edcf0708c74709c620f5642910c66c48 to your computer and use it in GitHub Desktop.
Download ZIP
modify dynamic data with computed properties
Raw
computed_properties.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<code>{{ getProductsList | json }}</code>
</div>
<script>
var app = new Vue({
el: '#app',
mounted() {
this.getProducts();
},
data: {
products: []
},
computed: {
getProductsList() {
return this.products.map(function(product){
product.qty = 0;
return product;
});
}
},
methods: {
getProducts() {
var vm = this;
axios.get('https://jsonplaceholder.typicode.com/users').then(function(response){
vm.products = response.data;
}).catch(function(err){
alert('Something went wrong');
});
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment