refactor(Vue): avoid manual div and style class.

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue

@@ -1,7 +1,8 @@
 <template>
     <v-container>
       <v-form ref="form" v-model="valid">
-        <div class="d-flex mb-4">
+        <v-row>
+          <v-col>
           <v-select
             v-model="purchase.customer"
             :items="clients"
@@ -11,16 +12,20 @@
             :rules="[rules.required]"
             required
             class="mr-4"
-          ></v-select>
+            ></v-select>
+          </v-col>
+          <v-col
+            lg="2"
+            >
           <v-text-field
             v-model="purchase.date"
             label="Fecha"
             type="date"
             :rules="[rules.required]"
             required
-            style="flex: 0 1 250px;"
-          ></v-text-field>
-        </div>
+            ></v-text-field>
+          </v-col>
+          </v-row>
 
         <v-textarea
           v-model="purchase.notes"
@@ -32,7 +37,7 @@
           <v-toolbar>
           <v-toolbar-title secondary>Productos</v-toolbar-title>
         </v-toolbar>
-        <div v-for="(line, index) in purchase.saleline_set" :key="line.id">
+        <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
           <v-row>
             <v-col>
               <v-select
@@ -80,7 +85,7 @@
               <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
             </v-col>
           </v-row>
-        </div>
+        </v-container>
         <v-btn @click="addLine" color="blue">Agregar</v-btn>
 
       </v-container>
@@ -143,7 +148,7 @@
         const dd = String(today.getDate()).padStart(2, '0');
         return `${yyyy}-${mm}-${dd}`;
       },
-      
+
       onProductChange(index) {
         const selectedProductId = this.purchase.saleline_set[index].product;
         const selectedProduct = this.products.find(p => p.id == selectedProductId);