Início / coding / Perguntas / 79543260
Accepted
Yorian
Asked: 2025-03-29 20:44:20 +0800 CST

Vue emite do filho e atualiza o estado no pai

  • 772

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

2 respostas

  1. Acho que é melhor mover o novo objeto de produto para o pai e gerenciá-lo lá enquanto o fornece ao formulário por meio de uma propriedade:

    Parque infantil

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

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

function addRow(item: Product){
  products.push(item);
  product.value = {
    id: (products.at(-1)?.id ?? 0) + 1,
    name: '',
    price: 0
  };
}

</script>
<template>
  <List :products/>
  <Form :product @add-row="addRow"/>
</template>
    • 1
  2. Best Answer

    Quando você atualizou os campos do formulário após a emissão, ele modificou o objeto que já estava no array products do pai (já que era a mesma referência). Ao criar um novo objeto na emissão e redefinir o formulário, você garante que cada produto adicionado seja um objeto distinto, e o formulário comece do zero a cada vez.

    AdicionarFormulárioProduto.vue

    <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="addProduct" />
      </div>
</template>

    <script setup lang="ts">
      const emit = defineEmits<{
        addRow: [item: Product];
      }>();
    
      const product = ref<Product>({
        id: 0,
        name: "",
        price: 0,
      });
    
      function addProduct() {
        emit("addRow", { ...product.value });
    
        product.value = {
          id: 0,
          name: "",
          price: 0,
        };
      }
</script>

    Componente da lista de compras.vue

    <template>
      <div>
        <ShoppingListComponent :products="products" />
        <AddProductForm @addRow="addProduct" />
      </div>
</template>

    <script setup lang="ts">
      const products = ref<Product[]>([
        { id: 1, name: "Apple", price: 0.5 },
        { id: 2, name: "Banana", price: 0.3 },
      ]);
    
      function addProduct(newProduct: Product) {
        const id = products.value.length + 1;
        products.value.push({ ...newProduct, id });
      }
</script>
    • 1

relate perguntas