Basic Vue interview

gistfile1.vue

<template>
  <h1>List items</h1>

  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <button @click="addItem">Add item</button>
</template>

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

const items = ref([
  { name: "Item 1", id: 1 },
  { name: "Item 2", id: 2 },
  { name: "Item 3", id: 3 },
])

function addItem() {
  const id = items.length + 1
  items.push({ name: `Item ${id}`, id })
}
</script>

React version:

export default function App() {
  const items = [
    { name: "Item 1", id: 1 },
    { name: "Item 2", id: 2 },
    { name: "Item 3", id: 3 },
  ];

  const addItem = () => {
    const id = items.length + 1;
    items.push({ name: `Item ${id}`, id })
  };

  return (
    <div>
      <h1>List items</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add item</button>
    </div>
  );
}

With types

<template>
  <h1>List items</h1>

  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <button @click="addItem">Add item</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 1. Define this type such that given objects will require an `id` parameter
// 2. Make the type of the `id` parameter configurable with a second generic argument
declare type SafeItem<T>;

type ListItem = { name: string }

const items = ref<SafeItem<ListItem>[]>([
  { name: "Item 1", id: 1 },
  { name: "Item 2", id: 2 },
  { name: "Item 3", id: 3 },
])

function addItem() {
  const id = items.length + 1
  items.push({ name: `Item ${id}`, id })
}
</script>