mattmaribojoc

<template lang="html">
  <div>
    <form v-on:submit='addTodo($event)'>
      <input type='text' placeholder='Enter Todo' v-model='newTodo'/>
      <input type='submit' />
    </form>
    <ul>
      <li v-for='todo in todos' :key='todo._id'>
        <span>{{todo}}</span>
      </li>

mattmaribojoc

app.post('/addTodo', (req, res) => {
  const collection = client.db('test').collection('todos')
  var todo = req.body.todo // parse the information from the request's body
  collection.insertOne({title: todo}, function (err, results) {
    if (err) {
      console.log(err)
      res.send('')
      return
    }
    res.send(results.ops[0]) // returns the document we just inserted

mattmaribojoc

app.post('/addTodo', (req, res) => {
  const collection = client.db('test').collection('todos')
  var todo = req.body.todo // parse the information from the request's body
  collection.insertOne({title: todo}, function (err, results) {
    if (err) {
      console.log(err)
      res.send('')
      return
    }
    res.send(results.ops[0]) // returns the document we just inserted

mattmaribojoc

app.post('/deleteTodo', (req, res) => {
  const collection = client.db('test').collection('todos')
  // remove document by its unique _id
  collection.removeOne({'_id': mongo.ObjectID(req.body.todoID)},   function (err, results) {
    if (err) {
      console.log(err)
      res.send('')
      return
    }
    res.send() // return

mattmaribojoc

<template>
  <div>
    <input type="text" v-model="input" placeholder="Add Grocery" />
    <input type="submit" @click="addGrocery()" />
    <ul>
      <li v-for="(item, index) in groceries" :key="item">
        {{ item }}
        <button @click="deleteGrocery(index)">X</button>
      </li>
    </ul>

mattmaribojoc

<template>
  <div>
    <input type="text" v-model="state.input" placeholder="Add Grocery" />
    <input type="submit" @click="addGrocery()" />
    <ul>
      <li v-for="(item, index) in state.groceries" :key="item">
        {{ item }}
        <button @click="deleteGrocery(index)">X</button>
      </li>
    </ul>

mattmaribojoc

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

mattmaribojoc

<script>
import { ref, computed } from 'vue'
export default {
   setup () {
      const a = ref(3)
      const b = computed(() => a.value + 2)
      
      const changeA = () => { a.value = 4 }

      return { a, b, changeA } // have to return everything! 

mattmaribojoc

<script setup>
import { ref, computed } from 'vue'

// all of these are automatically bound to the template
const a = ref(3)
const b = computed(() => a.value + 2)
      
const changeA = () => { a.value = 4 } 

</script>

mattmaribojoc

<template>
  <component-b />
</template>
<script setup>
  import ComponentB from './components/ComponentB.vue' // really that's it!
</script>