Vue

by Nisthar K

HTML

<template>
	<section class="container">
		<div class="columns is-centered">
		 <div class="column is-half has-text-centered header">
			 <h2 class="title">{{data.name}}</h2>
			 <h6 class="subtitle">Add product</h6>
				<section class="add-shop-form">
					<b-field label="Product name" class="label-muted">
						<b-input type="text" maxlength="30" placeholder="My product name" v-model="productname" required></b-input>
					</b-field>
					<b-field label="Product image" class="label-muted" style="margin-bottom: 10px !important;">
					 <dropzone id="productimage" ref="el" :options="options" :destroyDropzone="true" @vdropzone-file-added="addImage"></dropzone>
					</b-field>
					<b-field label="Description" class="label-muted">
						<b-input type="textarea" minlength="30" maxlength="500" placeholder="A short description" v-model="productdescription" required></b-input>
					</b-field>
					<b-field label="Category" class="label-muted" style="margin-bottom: 10px !important;">
						 <v-select :options="categories" v-model="productcategory" placeholder="Select a category"></v-select>
					</b-field>
                    <label class="label">Cost</label>
						<b-field  class="label-muted field-margin" custom-class="field-margin">
						 <b-select placeholder="Currency" v-model="productcurrency">
                            <option value="usd">$</option>
                            <option value="inr">INR</option>
                        </b-select>
                        <b-input type="number" placeholder="0,00" number v-model="productcost"></b-input>
                         <b-select placeholder="Quantity" v-model="productquantityunit">
                            <option value="item">Item</option>
                            <option value="kg">Kilogram</option>
                        </b-select>
                         <b-input type="number" placeholder="0,00" number v-model="productquantity"></b-input>
                        
                       ...