vuejs computed properties

shama · shama · commit 4cdd81a41dee · 2018-06-05T22:54:51.000-07:00
diff --git a/vuejs-computed-properties/App.vue b/vuejs-computed-properties/App.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <button @click="flipSort">Flip Sort</button>
+    <ul>
+      <li v-for="bear in bears" :key="bear.id">
+        {{bear.name}}
+      </li>
+    </ul>
+    <button @click="newBear">New Bear</button>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: ['beardb'],
+  data() {
+    return {
+      sort: 1,
+      rawBears: this.beardb
+    }
+  },
+  computed: {
+    bears: {
+      get() {
+        console.log('HELLO!')
+        const result = Object.keys(this.rawBears).map((id) => {
+          const bear = this.rawBears[id]
+          bear.id = id
+          return bear
+        })
+        result.sort((a, b) => {
+          return a.name.localeCompare(b.name) * this.sort
+        })
+        return result
+      },
+      set(newValue) {
+        this.$set(this.rawBears, 'autoid', {
+          name: newValue
+        })
+      }
+    }
+  },
+  watch: {
+    bears(newValue, oldValue) {
+
+    }
+  },
+  methods: {
+    flipSort() {
+      this.sort = this.sort === 1 ? -1 : 1
+    },
+    newBear() {
+      this.bears = 'Ozma'
+      // this.$set(this.rawBears, 'newid', {
+      //   name: 'Steve'
+      // })
+      // this.rawBears = Object.assign({}, this.rawBears, {
+      //   'newid': {
+      //     name: 'Steve'
+      //   }
+      // })
+      // this.beardb['newid'] = {
+      //   name: 'Steve'
+      // }
+      // delete this.beardb['bear1']
+    }
+  }
+}
+</script>
diff --git a/vuejs-computed-properties/README.md b/vuejs-computed-properties/README.md
@@ -0,0 +1,10 @@
+# Vue.js Computed Properties
+
+> [https://www.youtube.com/watch?v=8antoF7LyIo](https://www.youtube.com/watch?v=8antoF7LyIo)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/vuejs-computed-properties/index.html b/vuejs-computed-properties/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/vuejs-computed-properties/index.js b/vuejs-computed-properties/index.js
@@ -0,0 +1,28 @@
+const Vue = require('vue')
+const App = require('./App.vue')
+
+const beardb = {
+  'bear1': {
+    name: 'Oliver',
+    type: 'grizzly'
+  },
+  'bear3': {
+    name: 'Sheryl',
+    type: 'brown'
+  },
+  'bear55': {
+    name: 'Frank',
+    type: 'polar'
+  },
+}
+
+new Vue({
+  el: '#app',
+  render: function (h) {
+    return h(App, {
+      props: {
+        beardb: beardb
+      }
+    })
+  }
+})
diff --git a/vuejs-computed-properties/package.json b/vuejs-computed-properties/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vuejs-computed-properties",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js:bundle.js -- -t vueify",
+    "test": "node test.js"
+  },
+  "browser": {
+    "vue": "vue/dist/vue.common.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^11.2.0",
+    "vueify": "^9.4.1"
+  },
+  "dependencies": {
+    "vue.js": "^0.3.2"
+  }
+}
