Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

117
Vistas
How can i passing data props to "units" form and v-model?

i'm learning vue js 3 and inertia, but i'm having problem when displaying props data into my v-model from reactive form, please help me. Thank you

This is my code:

    data (props) {
        const form = reactive ({
            invoice_code: props.invoice.invoice_code,
            customer_name: props.invoice.customer_name,
            units: [{
                unit_quantity: props.invoice.units.unit_quantity,
                unit_type: props.invoice.units.unit_type,
                unit_name: props.invoice.units.unit_name,
                unit_description: props.invoice.units.unit_description,
                unit_completeness: props.invoice.units.unit_completeness,
                unit_cost: props.invoice.units.unit_cost,
            }],
        })
        function update () {
            Inertia.put(`/invoice/`+ props.invoice.id, form)
        }
        return { form, update }
    },
    props: {
        invoice: Object,
    },
  }
};

how to displaying this [units] into v model?

its work when i use this

unit_quantity: props.invoice.units[0].unit_quantity,

but this only displaying with index [0], not to multi value

    <table>
     <tr>
       <th>Qty</th>
       <th>Unit</th>
       <th>Unit Name</th>
       <th>Description</th>
       <th>Completeness</th>
       <th>Cost</th>
     </tr>
     <tr v-for="(unit, index) in form.units" :key="unit.id">
        <td>
          <input type="number" v-model="unit.unit_quantity">
        </td>
        <td>
          <select v-model="unit.unit_type">
            <option value="Camera">Camera</option>
            <option value="Phone">Phone</option>
            <option value="Laptop-PC">Laptop-PC</option>
            <option value="Other">Other</option>
          </select>
        </td>
        <td>
          <input type="text" v-model="unit.unit_name">
        </td>           
        <td>
          <input type="text" v-model="unit.unit_description">
        </td>
        <td>
          <input type="text" v-model="unit.unit_completeness">
        </td>
        <td>
          <input type="number" v-model="unit.unit_cost">
        </td>
      </tr>
  </table>

this my template

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You only have 1 unit in your units array. Try setting your units like this.

data (props) {
        const form = reactive ({
            invoice_code: props.invoice.invoice_code,
            customer_name: props.invoice.customer_name,
            units: units: props.invoice.units,
        })
        function update () {
            Inertia.put(`/invoice/`+ props.invoice.id, form)
        }
        return { form, update }
    },
    props: {
        invoice: Object,
    },
  }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda