| commit | author | age | ||
| 991c76 | 1 | <template> |
| D | 2 | <md-field> |
| 3 | <label>New ToDo</label> | |
| 4 | <md-input :placeholder="placeholderMsg" | |
| b03f98 | 5 | @keyup.enter="newTodoAdded" |
| A | 6 | v-model="newTodo" |
| 991c76 | 7 | ></md-input> |
| D | 8 | </md-field> |
| 9 | </template> | |
| 10 | <script> | |
| 11 | export default { | |
| 12 | name: "NewTodo", | |
| 13 | props: { | |
| 14 | placeholderMsg: String | |
| 15 | }, | |
| b03f98 | 16 | data() { |
| 991c76 | 17 | return { |
| b03f98 | 18 | newTodo: "" |
| A | 19 | }; |
| 991c76 | 20 | }, |
| D | 21 | methods: { |
| b03f98 | 22 | newTodoAdded(e) { |
| A | 23 | console.info("INFO - Adding new todo ", this.newTodo); |
| 24 | this.newTodo = e.target.value; | |
| 25 | this.$store.dispatch("setNewTodo", this.newTodo); | |
| 26 | this.$store.dispatch("addTodo"); | |
| 27 | this.$store.dispatch("clearNewTodo"); | |
| 28 | this.newTodo = ""; | |
| 29 | } | |
| 991c76 | 30 | } |
| D | 31 | }; |
| 32 | </script> | |
| 33 | ||
| 34 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 35 | <style scoped lang="scss"> | |
| 36 | ||
| 37 | </style> | |
