Início / user-301175

Yorian's questions

Martin Hope
Yorian
Asked: 2025-03-29 20:44:20 +0800 CST
  • 5

Estou tentando aprender Vue e quero construir um componente pai de lista de compras (meu exercício de treinamento). O pai gerenciará o estado e ele contém dois componentes filhos: 1) a tabela com produtos e preços para cada produto 2) o formulário para adicionar um novo item.

Eu tenho o seguinte ShoppingListComponent.vue:

<template>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import type { Product } from './models';

interface Props {
  products: Product[];
}

defineProps<Props>();
</script>

A interface do produto é simplesmente:

export interface Product {
  id: number;
  name: string;
  price: number;
}

O AddProductFrom.vue:

<!-- I use quasar ->
<template>
  <div class="row q-gutter-sm">
    <q-input filled v-model="product.name" label="Name" />
    <q-input filled v-model="product.price" label="Price />
    <q-btn color="black" text-color="white" label="Add" @click="$emit('addRow', product)" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { type Product } from './models';

const product = ref<Product>({
  id: 1,
  name: '',
  price: 0,
});

defineEmits<{
  addRow: [item: Product];
}>();
</script>

Isso "funciona" e adiciona uma linha à tabela, mas ainda há algum tipo de referência porque quando adiciono um produto e altero o conteúdo do formulário, os dados na tabela também mudam.

O que eu quero é poder adicionar um produto, limpar o formulário e adicionar um novo produto (o que você esperaria). Como posso resolver isso?

typescript