Vue Js Multi Column Input Field Value Add Button | Dynamically Add Form Fields Vue

 

components/tableBody.vue

<template>
<tr>
<td>
<input class="form-control" readonly :value="itemname">
</td>
<td>
<input
class="form-control text-right"
type="number"
min="0"
step="1"
:value="quantitySynced"
>
</td>
<td>
<input
class="form-control text-right"
type="number"
min="0"
step=".5"
:value="sellingpriceSynced"
>
</td>
<td>
<input
readonly
class="form-control text-right"
type="number"
min="0"
step="1"
:value="amountSynced"
>
</td>
</tr>
</template>

<script>
export default {};
</script>

<style>
</style>

App.vue

<template>
<div id="app">
<button type="button" @click="btnOnClick">Add</button>

<div id="printMe">
<table class="table table-striped table-hover table-bordered mainTable" id="Table">
<thead>
<tr>
<th class="itemName">Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, k) in tableData" :key="k">
<td>
<input class="form-control" readonly v-model="row.itemname">
</td>
<td>
<input
class="form-control text-right"
type="text"
min="0"
step=".01"
:value="row.quantity"
v-on:keyup="calculateQty(row)"
>
</td>
<td>
<input
class="form-control text-right"
type="text"
min="0"
step=".01"
:value="row.sellingprice"
v-on:keyup="calculateSPrice(row)"
>
</td>
<td>
<input
readonly
class="form-control text-right"
type="text"
min="0"
step=".01"
:value="row.amount"
>
</td>
</tr>
</tbody>
</table>
</div>
<button v-print="'#printMe'">Print</button>
</div>
</template>

<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
calculateQty(data) {
console.log("calculateQty", data);
},
calculateSPrice(data) {
console.log("calculateSPrice", data);
},
btnOnClick(v) {
this.tableData.push({
itemname: "item",
quantity: 1,
sellingprice: 55,
amount: 55
});
}
}
};
</script>

<style>
input {
color: black;
}
</style>


main.js

import Vue from "vue";
import App from "./App.vue";
import Print from "vue-print-nb";

Vue.config.productionTip = false;

Vue.use(Print);

new Vue({
render: h => h(App)
}).$mount("#app");


package.json

{
"name": "vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue-print-nb": "1.4.0",
"vue": "^2.5.22"
},
"devDependencies": {
"@vue/cli-plugin-babel": "3.6.0",
"@vue/cli-plugin-eslint": "3.6.0",
"@vue/cli-service": "3.6.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": ["plugin:vue/essential", "eslint:recommended"],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": ["> 1%", "last 2 versions", "not ie <= 8"],
"keywords": [],
"description": ""
}



  • Dynamically Add Form Fields Vue
  • Vue Js Add More Input Field
  • Vue Input-group
  • Add Textbox On Button Click Vuejs
  • Vue 3 Form Submit

Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.