I am beginner in dojo, i have done some work but unable to add the form value into respective cell in the grid, After click on the submit button.
Here my Dojo script
require([
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dojo/dom-form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dojo/domReady!"
],
function(lang, dom, domConstruct, on, domForm, TextBox, Button, DataGrid, Memory, ObjectStore, request)
{
var formJson, first, last, dob, city, state, country, mobile, formId, dataStore, grid;
/*set up layout*/
var layout = [[
{'name': 'First name', 'field': 'id', 'width': '100px'},
{'name': 'Last Name', 'field': 'col2', 'width': '100px'},
{'name': 'DOB', 'field': 'col3', 'width': '200px'},
{'name': 'City', 'field': 'col4', 'width': '150px'},
{'name': 'State', 'field': 'col5', 'width': '150px'},
{'name': 'Country', 'field': 'col6', 'width': '150px'},
{'name': 'Mobile', 'field': 'col7', 'width': '150px'},
]];
/*create a new grid*/
var grid = new DataGrid(
{
store: dataStore,
query: { id: "*" },
queryOptions: {},
structure: layout
}, "grid");
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
});
function submitForm() {
first= dijit.byId('first').get('value');
last= dijit.byId('last').get('value');
dob= dijit.byId('dob').get('value');
city= dijit.byId('city').get('value');
state= dijit.byId('state').get('value');
country= dijit.byId('country').get('value');
mobile= dijit.byId('mobile').get('value');
//console.log(first+','+last+','+dob+','+city+','+state+','+country+','+mobile);
formId = "myform";
formJson = domForm.toJson(formId);
console.log(formJson);
//dataStore.add(formJson);
//grid.setQuery({id: "*"});
}
// Connect the buttons
on(dom.byId("submitForm"), "click", submitForm);
console.log(formJson);
});
and html
<body class="claro">
<div id="wrapper">
<form id="myform">
<div id="formContainer">
<div class="row">
<label>First Name</label>
<input type="text" id="first" name="first" data-dojo-type="dijit.form.TextBox" value="Thilakar" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" id="last" name="last" data-dojo-type="dijit.form.TextBox" value="Kathirvel" />
</div>
<div class="row">
<label>DOB</label>
<input type="text" id="dob" name="dob" data-dojo-type="dijit.form.TextBox" value="07/10/1983"/>
</div>
<div class="row">
<label>City</label>
<input type="text" id="city" name="city" data-dojo-type="dijit.form.TextBox" value="Chennai"/>
</div>
<div class="row">
<label>State</label>
<input type="text" id="state" name="state" data-dojo-type="dijit.form.TextBox" value="Tamilnadu"/>
</div>
<div class="row">
<label>Country</label>
<input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
</div>
<div class="row">
<label>Mobile</label>
<input type="text" id="mobile" name="mobile" data-dojo-type="dijit.form.TextBox" value="9094730388"/>
</div>
<div class="row">
<label> </label>
<input type="button" value="submit" id="submitForm"/>
</div>
</div>
</form>
<h1>Saved Data</h1>
<div id="gridDiv"></div>
</div>
</body>
please give some suggestion how it's possible.
Thanks
There are several issues. See working example here : http://jsfiddle.net/psoares/Hm8j2/
I changed your html to this :
<div id="wrapper">
<form id="myform">
<div id="formContainer">
<div class="row">
<label>First Name</label>
<input type="text" id="first" name="first" data-dojo-type="dijit/form/TextBox" value="Thilakar" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="Kathirvel" />
</div>
<div class="row">
<label>DOB</label>
<input type="text" id="dob" name="dob" data-dojo-type="dijit/form/TextBox" value="07/10/1983"/>
</div>
<div class="row">
<label>City</label>
<input type="text" id="city" name="city" data-dojo-type="dijit/form/TextBox" value="Chennai"/>
</div>
<div class="row">
<label>State</label>
<input type="text" id="state" name="state" data-dojo-type="dijit/form/TextBox" value="Tamilnadu"/>
</div>
<div class="row">
<label>Country</label>
<input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
</div>
<div class="row">
<label>Mobile</label>
<input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="9094730388"/>
</div>
<div class="row">
<label> </label>
<button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Submit</button>
</div>
</div>
</form>
<h1>Saved Data</h1>
<div id="gridDiv"></div>
And your javascript to :
require([
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dijit/registry",
"dojo/domReady!"
], function(lang, dom, domConstruct, on, Form, TextBox, Button, DataGrid, Memory, ObjectStore, request, registry){
var layout, dataStore, grid, form;
/*set up layout*/
layout = [
{'name': 'First name', 'field': 'first', 'width': '100px'},
{'name': 'Last Name', 'field': 'last', 'width': '100px'},
{'name': 'DOB', 'field': 'dob', 'width': '200px'},
{'name': 'City', 'field': 'city', 'width': '150px'},
{'name': 'State', 'field': 'state', 'width': '150px'},
{'name': 'Country', 'field': 'country', 'width': '150px'},
{'name': 'Mobile', 'field': 'mobile', 'width': '150px'}
];
dataStore = new ObjectStore({ objectStore : new Memory() });
/*create a new grid*/
grid = new DataGrid({
store: dataStore,
query: { id: "*" },
queryOptions: {},
structure: layout
}, "gridDiv");
/*Call startup() to render the grid*/
grid.startup();
form = new Form({
onSubmit : function(evt) {
evt.preventDefault();
var formValue = this.get("value");
console.debug(formValue);
dataStore.newItem(formValue);
}
}, "formContainer");
form.startup();
});
Related
I have the following code:
odoo.define('ebs_portal_attendance.mn_tasks', function (require) {
"use strict";
$(document).ready(function () {
// Show create timesheet popup
$('#create_timesheet_button').on('click', function () {
var $modal = $('#create_timesheet_popup');
var task_id = $(this).data('task-id');
$modal.modal('show');
});
// Create timesheet
$('#create_timesheet_popup #create_timesheet_button').on('click', function () {
var $modal = $('#create_timesheet_popup');
var task_id = $modal.find('#task_id').val();
var name = $modal.find('#name').val();
var unit_amount = $modal.find('#unit_amount').val();
var date = $modal.find('#date').val();
ajax.jsonRpc("/my/tasks/create_timesheet", 'call', {
'values': {
'name': name,
'task_id': task_id,
'unit_amount': unit_amount,
'date': date,
}
}).then(function (result) {
if (result.success) {
$modal.modal('hide');
alert("Timesheet created successfully!");
} else {
alert("An error occurred while creating the timesheet.");
}
});
});
});
});
<template id="mn_tasks_list" inherit_id="project.portal_tasks_list">
<xpath expr="//t//t//t//tbody//t//tr//td[last()]" position="after">
<td>
<div class="o_download_pdf btn-toolbar flex-sm-nowrap">
<div>
<a role="button" class="btn btn-secondary flex-grow-1 mb-1 create_timesheet_button"
data-toggle="modal"
id='create_timesheet_button' data-target="#create_timesheet_popup" href="#">
<t>Create Timesheet</t>
</a>
</div>
</div>
</td>
</xpath>
</template>
</data>
<template id="create_timesheet_popup" name="Create Timesheet Popup">
<div id="create_timesheet_popup" class="modal fade">
<div class="modal-dialog modal-content"
style="border:solid 2px white; min-height:200px;max-width:800px;margin-top:10px">
<div class="modal-body" id="pop_html">
<a href="#" class="o_popup_btn_close o_not_editable o_default_snippet_text pull-right"
data-dismiss="modal" aria-hidden="true">X</a>
<div class="row">
<div class="col-md-12">
<form class="o_form_sheet">
<div class="o_form_sheet_name">
<h4>Create Timesheet</h4>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" required="required"/>
</div>
<div class="form-group">
<label for="task_id">Task:</label>
<select class="form-control" id="task_id" name="task_id" required="required">
<t t-foreach="tasks" t-as="task">
<option value="{{ task.id }}">{{ task.name }}</option>
</t>
</select>
</div>
<div class="form-group">
<label for="unit_amount">Hours:</label>
<input type="number" class="form-control" id="unit_amount" name="unit_amount"
required="required"/>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="date" name="date" required="required"/>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="create_timesheet_button" data-task-id="{{ task.id }}">Create Timesheet</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
#http.route('/my/tasks/create_timesheet', type='json', auth='user')
def create_timesheet(self, values):
task_id = values.get('task_id')
name = values.get('name')
unit_amount = values.get('unit_amount')
date = values.get('date')
try:
# Create new timesheet record
new_timesheet = http.request.env['account.analytic.line'].sudo().create({
'name': name,
'task_id': task_id,
'unit_amount': unit_amount,
'date': date,
})
# Return success message
return {'success': True, 'message': 'Timesheet created successfully'}
except Exception as e:
# Return error message
return {'success': False, 'message': 'An error occurred while creating the timesheet: %s' % e}
with the manifest is as follows:
` # always loaded
'data': [
'security/security.xml',
'security/ir.model.access.csv',
'views/views.xml',
'views/templates.xml',
'views/inherited_templates.xml',
],
'assets': {
'web.assets_backend': [
'model_folder/static/src/js/portal_timesheets.js',
],
},`
My Problem is that button on the portal in the list of tasks where the button is located it's there but now it's not doing anything i tried checking the js via adding console.log("test") to see if anything would appear under the web browser's console but there's nothing... what i am doing wring here please do help me.
Thank you!!
I'm looking to have it work where when the user clicks on create timesheet, a popup would appear and it'll take the task's ID and task.analytical_account_id.id and other inputs to which it'll create at the end a record for that model and appears under his timesheets.
there was a point where I got stuck while trying to make invoice transactions with vue js, I can add a new item, it works fine, the problem starts here, when I want to show the "description" and "discount_value" that I have hidden, it adds it to all lines, not like this, whichever index button is clicked. add his item. Thank you in advance for your help.
const app = new Vue({
el: '#app',
data: {
addAciklama: false,
addIndirim: false,
faturasections: [
{
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
}
],
},
methods: {
addNewFaturaSatiri() {
this.faturasections.push({
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
});
},
removeFaturaSatiri(faturasectionIndex) {
this.faturasections.splice(faturasectionIndex, 1);
},
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<section>
<div class="card-body border-bottom-light" v-for="(fatura, faturasectionIndex) in faturasections" :key="faturasectionIndex">
<div class="row">
<div class="col-sm-4 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="fatura.name" placeholder=" "/>
<label>HİZMET / ÜRÜN</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 brfiyati">
<div class="form-floating">
<input type="number" class="form-control" v-model.number="fatura.unit_price" placeholder=" "/>
<label>BR.FİYAT</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0 toplam">
<div class="form-floating">
<input type="text" class="form-control" v-model="fatura.net_total" placeholder=" "/>
<label>TOPLAM</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<div class="mb-1">
<div class="mb-1">
<button v-if="!addAciklama" #click="addAciklama = !addAciklama" class="dropdown-item">description</button>
<button v-if="!addIndirim" #click="addIndirim = !addIndirim" class="dropdown-item">discount_value</button>
</div>
</div>
<button class="btn btn-icon btn-secondary" #click="removeFaturaSatiri(faturasectionIndex)">DELETE</button>
</div>
</div>
<div id="aciklamalar" class="row mt-1">
<div class="col-12 d-flex">
<div class="col-sm-6 fatura-aciklama">
<div class="row" v-if="addAciklama">
<div class="f-a">
<div class="input-group">
<span class="input-group-text kdv">AÇIKLAMA</span>
<input type="text" class="form-control" v-model="fatura.description"/>
</div>
</div>
<div class="f-b">
<button class="btn btn-icon btn-outline-secondary" #click="addAciklama = !addAciklama">DELETE</button>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="d-flex flex-column">
<div class="row row mb-1" v-if="addIndirim">
<div class="i-i">
<div class="input-group">
<span class="input-group-text kdv">İNDİRİM</span>
<input type="text" class="form-control" v-model="fatura.discount_value"/>
</div>
</div>
<div class="i-s">
<button class="btn btn-icon btn-outline-secondary" #click="addIndirim = !addIndirim">DELETE</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-outline-secondary btn-sm"
data-repeater-create #click="addNewFaturaSatiri()">
<span class="align-middle">NEW INVOICE</span>
</button>
</div>
</div>
</div>
</section>
</div>
addAciklama and addIndirim are global variable which is defined in data property and it's obvious that if you change them, it applies to every iteration of your v-for block and not apply for each index separately.
In order to fix this, you can move addAciklama and addIndirim into each object in faturasections:
faturasections: [{
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
addIndirim: false,
addAciklama: false,
}],
Then in your template section code, you should replace all addIndirim and addAciklama to fatura.addIndirim and fatura.addAciklama. this will fix your issue.
I developed one page which is responsible for displaying cart items and the response is coming from backend upto this it's working fine .Now inside same page one more registration page is there and that also integrated with backend API, after successfully registered it should be redirected to /orderSuccess page but it's not redirecting ,Here what is the issue please help me How to fix this issue.
After registered it changes my url path /cart to /ordersuccess also but page is not displaying..please help me to fix this issue
Cart.vue
<template>
<div class="main">
<div class="first-section">
<div class="content">
<h5>My Cart({{books.length}})</h5>
</div>
<div v-for="book in books" :key="book.id" class="container">
<div class="mid-section">
<img v-bind:src="book.file" alt="not found">
<p class="title-section">{{book.name}}</p>
</div>
<div class="author-section">
<p class="author-name">by {{book.author}}</p>
</div>
<div class="price-section">
<h6>Rs.{{book.price}}</h6>
</div>
<div class="icons">
<i class="fas fa-minus-circle"></i>
<input class="rectangle" value=1>
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="btn-grps">
<button class="btn" v-on:click="flip()" v-if="hide==true" type="submit">Place Order</button>
</div>
</div>
<div class="second -section">
<div class="details-box">
<input type="text" v-if="hide==true" class="initial-btn" placeholder="Customer Details" />
</div>
<div v-if="hide==false" class="fill-details">
<form #submit.prevent="" class="address">
<h4 class="heading">Customer Details</h4>
<div class="name">
<input type="name" required pattern="[A-Za-z]{3,10}" v-model="name">
<label class="label">Name</label>
</div>
<div class="name">
<input type="text" required v-model="phoneNumber">
<label class="label">Phone Number</label>
</div>
<div class="pin">
<input type="text" required v-model="pincode">
<label class="label">PinCode</label>
</div>
<div class="pin">
<input type="text" required v-model="locality">
<label class="label">Locality</label>
</div>
<div class="address-block">
<input class="address" type="text" required v-model="address">
<label id="Add" class="label">Address</label>
</div>
<div class="city-landMark">
<input type="text" required v-model="city">
<label class="label">City/Town</label>
</div>
<div class="city-landMark">
<input type="text" required v-model="landmark">
<label class="label">LandMark</label>
</div>
<div class="Radio-Buttons">
<p>Type</p>
<div class="radio-btns flex-container">
<div>
<input type="radio" id="Home" value="Home" name="type" v-model="type">
<div class="first-radio"> <label class="home" for="Home">Home</label></div>
</div>
<div>
<input class="work-round" type="radio" id="Work" value="Work" name="type" v-model="type">
<div class="second-radio"> <label for="Work" class="work-label">Work</label></div>
</div>
<div>
<input class="other-round" type="radio" id="Other" value="Other" name="type" v-model="type">
<div class="third-radio"><label for="Other">Other</label></div>
</div>
</div>
<div class="btn-continue">
<button type="submit" #click="handlesubmit();" class="continue">continue</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
beforeMount() {
// if (localStorage.getItem("reloaded")) {
// localStorage.removeItem("reloaded");
// } else {
// localStorage.setItem("reloaded", "1");
// location.reload();
// }
service.userDisplayCart().then(response => {
this.books = response.data;
})
},
data() {
return {
flag: true,
hide: true,
booksCount: 0,
name: '',
phoneNumber: '',
pincode: '',
locality: '',
city: '',
address: '',
landmark: '',
type: '',
books: []
}
},
methods: {
flip() {
this.hide = !this.hide;
},
Togglebtn() {
this.flag = !this.flag;
},
handlesubmit() {
let userData = {
name: this.name,
phoneNumber: this.phoneNumber,
pincode: this.pincode,
locality: this.locality,
city: this.city,
address: this.address,
landmark: this.landmark,
type: this.type,
}
service.customerRegister(userData).then(response => {
alert("user registered successfully");
this.$router.push('/ordersuccess');
return response;
})
}
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/Cart.scss";
</style>
router.js
{
path:'/dashboard',
component:Dashboard,
children:[{
path:'/displaybooks',
component:DisplayBooks
},
{
path:'/sortLowtoHigh',
component:sortBooksLowtoHigh
},
{
path:'/sortHightoLow',
component:sortBooksHightoLow
},
{
path:'/cart',
component:Cart
},
{
path:'/ordersuccess',
component:OrderPlace
},
]
}
You can use the history mode on your router settings. This should fix the issue
const routes = {
path: 'Dashboard',
....
}
new VueRouter({routes, mode: 'history'});
this.$router.push({ path: '/ordersuccess' })
https://router.vuejs.org/guide/essentials/navigation.html
Picture of interlinkage between forms and fields.
I have searched this forum for an answer, as I suspect this has been asked before, but I haven't managed to find an answer.
I just picked up using Vue and Laravel, where I am building a form. Right now I am building a test to learn how to do it before I add complexity. The right form consists of 1 select-box and 3 text fields.
My requirements for the form are:
One button to duplicate the entire form.
One button in each form (also ones that are duplicated), which adds the 3 input-text fields in the form, by duplication the fields in the div called "registration_grid". One form may require the text-fields to be duplicated 10 times, others only 1 or 2...
I realize the code is a bit messy in its context, but it is put together by various pieces I found in tutorials along the way.
var app = new Vue({
el: '.container',
data: {
workouts: [
{
workout_unit: '',
workout_weight: '',
workout_comment: ''
}
]
},
methods: {
addNewEmployeeForm () {
this.workouts.push({
workout_unit: '',
workout_weight: '',
workout_comment: ''
})
},
deleteEmployeeForm (index) {
this.workouts.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div class="container">
<button class="btn btn-primary" type="button" name="button" #click="addNewEmployeeForm">Add form fields</button>
<div class="card" v-for="(workout, index) in workouts">
<div class="card-body">
<i class="far fa-trash-alt float-right" #click="deleteEmployeeForm(index)"></i>
<h4 class="card-title">Test form - #{{index}}</h4>
<div class="employee-form">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="registration_grid">
<input type="text" class="form-control" name="unit" placeholder="unit" v-model="workout.workout_unit">
<input type="text" class="form-control" name="weight" placeholder="weight" v-model="workout.workout_weight">
<input type="text" class="form-control" name="comment" placeholder="comment" v-model="workout.workout_comment">
</div>
</div>
</div>
</div>
Can this be done by Vue, and if so how?
You need to access the form data with workouts[index].unit for the v-model instead of workout.workout_unit
var app = new Vue({
el: '.container',
data: {
workouts: [
{
unit: '',
weight: '',
comment: ''
}
]
},
methods: {
addRow () {
this.workouts.push({
unit: '',
weight: '',
comment: ''
})
},
deleteRow (index) {
this.workouts.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div class="container">
<button class="btn btn-primary" type="button" name="button" #click="addRow">Add form fields</button>
<div class="card" v-for="(workout, index) in workouts">
<div class="card-body">
<i class="far fa-trash-alt float-right" #click="deleteRow(index)"></i>
<h4 class="card-title">Test form - {{index}}</h4>
<div class="employee-form">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="registration_grid">
<input type="text" class="form-control" name="unit" placeholder="unit" v-model="workouts[index].unit">
<input type="text" class="form-control" name="weight" placeholder="weight" v-model="workouts[index].weight">
<input type="text" class="form-control" name="comment" placeholder="comment" v-model="workouts[index].comment">
</div>
</div>
</div>
</div>
</div>
Modified example to only duplicate the input fields
var app = new Vue({
el: '.container',
data: {
workouts: [
{
unit: '',
weight: '',
comment: ''
}
]
},
methods: {
addRow () {
this.workouts.push({
unit: '',
weight: '',
comment: ''
})
},
deleteRow (index) {
this.workouts.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div class="container">
<button class="btn btn-primary" type="button" name="button" #click="addRow">Add form fields</button>
<div class="card">
<div class="card-body">
<h4 class="card-title">Test form</h4>
<div class="employee-form">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="registration_grid" v-for="(workout, index) in workouts">
<input type="text" class="form-control" name="unit" placeholder="unit" v-model="workouts[index].unit">
<input type="text" class="form-control" name="weight" placeholder="weight" v-model="workouts[index].weight">
<input type="text" class="form-control" name="comment" placeholder="comment" v-model="workouts[index].comment">
<i class="far fa-trash-alt float-right" #click="deleteRow(index)"></i>
</div>
</div>
</div>
</div>
</div>
I am building a list using VueJs by adding list-items through a form. I want to also add notes to be sub-items of the main list items. I can add the major list items with no problems:
When I try to add subitems all the input fields for the subitems respond to the data I am keying in before I press the add button for the first time. I am guessing that this has to do how with how I dynamically assigning Ids to the inputs. And after I press the submit button it doesn't add the note to the list of subitems. I can't seem to figure out why:
I include a JsFiddle
html
<div id="app">
<form v-on:submit.prevent="addInstance()">
<div class="form-group">
<input id="eventtext" type="text" class="form-control" placeholder="Enter new Instance" v-model="todo.name">
<button><i class="fa fa-plus"> Add Instance</i></button>
</div>
</form>
<div class="">
<div v-for="todo in todoStore" class="list-group">
<div class="list-group-item">
<h4>
Main Card
</h4> {{todo.name}}
</div>
<div class="list-group-item nopadding">
<button class="btn btn-xs btn-danger margin-10" v-on:click="todoDelete(todo)">
<i class=" fa fa-trash"></i>
</button>
</div>
<div v-for="note in todoNoteStore" class="list-group nopadding nomargin">
<div v-if="todo.id == note.card_id">
<div class="list-group-item">
<h4>
Note fore card {{todo.id}}
</h4> {{note.card_id}}
</div>
<div class="list-group-item nopadding">
<button class="btn btn-xs btn-danger margin-10" v-on:click="removeNoteInstance(note)">
<i class=" fa fa-trash"></i>
</button>
<form v-on:submit.prevent="addNoteInstance()">
<div class="form-group">
<input id="noteCount=noteCount+1" type="text" class="form-control"
placeholder="Enter new Note Instance" v-model="todoNote.name">
<button><i class="fa fa-plus"> Add Note Instance</i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Js
new Vue({
el: '#app',
data: function() {
return {
todo: {
id: 1,
name: '',
completed: false,
check: ''
},
todoNote: {
id: 1,
name: '',
completed: false,
check: ''
},
todoStore: [{
id: 1,
name: 'White',
completed: true,
check: 'This is from card 1'
},
{
id: 2,
name: 'Balack',
completed: true,
check: 'This is from card 2'
}
],
todoNoteStore: [{
id: 1,
card_id: 2,
name: 'White',
event3: 'Heisenberg',
completed: true,
check: 'This is from note 1'
},
{
id: 2,
card_id: 1,
name: 'Yelloe',
event3: 'Green',
completed: true,
check: 'This is from note 2'
}
]
}
},
methods: {
addInstance: function() {
this.todoStore.push(this.todo);
this.todo = {};
},
addNoteInstance: function() {
this.todoNoteStore.push(this.todoNote);
this.todoNote = {};
},
removeNoteInstance: function(note) {
this.todoNoteStore.remove(note);
}
}
});
css
.nopadding {
padding-top: 0px;
!important;
padding-bottom: 0px;
!important;
}
.nomargin {
margin: 0px;
}