I’m looking solution for how to auto fill input in vue js. I have a form which consists of input type text, select dropdown, quantity, etc. I want when the select dropdown is selected, then the quantity of vCPU, vRAM, and quantity will be automatically filled with the value according to the selected Package type.
I’m confused, to put the if conditional in the <base-quantity> at the @updateQuantity custom event or in v-if attribute. Is there anyone here that can help me solve this problem?
The full source code is in this codesandbox => https://codesandbox.io/s/suspicious-almeida-rjyy9
<template>
<div class="container-fluid">
<h2>Storage</h2>
<div class="row">
<div class="col-12">
<form @submit.prevent="submitFormStorage">
<div class="form-group">
<label for="">Server Name</label>
<input type="text" name="name" class="form-control" v-model="serverName" />
</div>
<div class="form-group">
<div for="formGroupExampleInput">Specification</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="storage-type"
:value="specifications(0).name"
@change="setSpecification"
id="custom"
/>
<label class="form-check-label" for="custom">custom</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="storage-type"
:value="specifications(1).name"
@change="setSpecification"
id="pool"
/>
<label class="form-check-label" for="pool">Pool resource</label>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group-label">
<label class="form-group-text" for="package-type">Package</label>
</div>
<select
class="custom-select"
id="package-type"
v-model="selectedPackage"
>
<template v-for="data in storagePackage" :key="data.name">
<!-- <option selected>Choose...</option> -->
<option :value="data.value">
{{ data.name }}
</option>
</template>
</select>
</div>
<h6>Components</h6>
<div class="row">
<div class="col-6">
<div class="form-group">
<div for="formGroupExampleInput">vCPU (GHz)</div>
<base-quantity
@updateQuantity="updateCpu"></base-quantity>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div for="formGroupExampleInput">vRAM (Gb)</div>
<base-quantity
@updateQuantity="updateRam"></base-quantity>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div for="formGroupExampleInput">Capacity</div>
<base-quantity
@updateQuantity="updateCapacity"></base-quantity>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div for="formGroupExampleInput">Server Qty</div>
<base-quantity
@updateQuantity="updateServer"></base-quantity>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="formGroupExampleInput">Storage Type</label>
<select name="database" id="" class="form-control" v-model="selectedStorageType">
<option v-for="storage in storages" :key="storage.name" :value="storage.value">{{ storage.name }}</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="formGroupExampleInput">OS</label>
<select name="database" id="" class="form-control" v-model="selectedOs">
<option v-for="o in os" :key="o.name" :value="o.value">{{ o.name }}</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="formGroupExampleInput">Database</label>
<select name="database" class="form-control" v-model="selectedDatabase">
<option v-for="database in databases" :key="database.name" :value="database.value">{{ database.name }}</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="formGroupExampleInput">Firewall</label>
<select name="database" id="" class="form-control" v-model="selectedFirewall">
<option v-for="firewall in firewalls" :key="firewall.name" :value="firewall.value">{{ firewall.name }}</option>
</select>
</div>
</div>
</div>
<div class="form-group mt-4">
<button class="btn btn-primary btn-block" @click.prevent="addToCart">Submit</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import BaseQuantity from "../base/BaseQuantity.vue";
export default {
components: {
BaseQuantity,
},
data() {
return {
specification: '',
serverName: '',
databases: (
{
name: "DB 1",
value: 100
},
{
name: "DB 2",
value: 120
}
),
specifications: (
{
name: 'Custom',
value: 200
},
{
name: 'Pool',
value: 100
}
),
storages: (
{
name: "storage 1",
value: 100
},
{
name: "storage 2",
value: 120
}
),
os: (
{
name: "os 1",
value: 100
},
{
name: "os 2",
value: 120
}
),
firewalls: (
{
name: "firewall 1",
value: 100
},
{
name: "firewall 2",
value: 120
}
),
storagePackage: (
{
name: "One",
value: 30,
},
{
name: "Two",
value: 40,
},
{
name: "Three",
value: 50,
},
),
quantity: 0,
duration: 0,
selectedStorageType: "",
selectedPackage: "",
selectedDatabase: "",
selectedFirewall: "",
selectedOs: "",
selectedStorage: "",
};
},
watch: {
serverName: function() {
this.$store.commit('setServerName', this.serverName);
},
selectedPackage: function() {
let pack = this.storagePackage.find((pack) => pack.value == this.selectedPackage);
this.$store.commit('setPackage', pack);
},
selectedOs: function() {
let os = this.os.find((os) => os.value == this.selectedOs);
this.$store.commit('setOs', os);
},
selectedFirewall: function() {
let firewall = this.firewalls.find((firewall) => firewall.value == this.selectedFirewall);
this.$store.commit('setFirewall', firewall);
},
selectedDatabase: function() {
let database = this.databases.find((database) => database.value == this.selectedDatabase);
this.$store.commit('setDatabase', database);
},
specification: function() {
let specification = this.specifications.find((specification) => specification.name == this.specification);
this.$store.commit('setSpecification', specification);
},
selectedStorageType: function() {
let storage = this.storages.find((storage) => storage.value == this.selectedStorageType);
this.$store.commit('setStorageType', storage);
}
},
methods: {
async addToCart() {
let isEmpty = await this.$store.dispatch('isEmpty');
if(!isEmpty) {
this.$store.commit('calculateStorageCost');
this.$store.commit('setStorage', this.$store.getters.getStorageState);
}
},
updateCpu(val) {
this.$store.commit('setCpu', {qty: val, value: 100});
},
updateRam(val) {
this.$store.commit('setRam', {qty: val, value: 100});
},
updateCapacity(val) {
this.$store.commit('setCapacity', {qty: val, value: 100});
},
updateServer(val) {
this.$store.commit('setServer', {qty: val, value: 100});
},
updateDuration(val) {
this.duration = val;
},
setSpecification(event) {
this.specification = event.target.value;
}
},
};
</script>
