Hi, I'm using Alpine.js in laravel blade and I want to build a dependent dropwdown with dynamic add new row and remove row and add new rows works fine but when I select the parent dropdown it's lost all other dependent dropdown values. Can you help to how I can get rid of ? Thanks
my-blade-file.php
{{-- add or remove dropdown seciton --}}
<div x-data="addNewWithDropdown()">
<div class="col-2">
<button class="btn bg-gradient-info custom-add-icon-btn" type="button" name="button" #click="addNewField()">
<i class="fa-solid fa-plus"></i> Add New
</button>
</div>
<div class="col-12">
<template x-for="(field, index) in fields" :key="field.id">
<div class="add-input" x-data="devicesData()">
<div class="row">
<div class="col-6">
<label class="form-label mt-0">Select Brand </label>
<select :id="'row-' + index" x-model="brand" class="form-control" name="brand[]" #change="getItems()">
<option value="-1">Select Brand</option>
#foreach ($brands as $brand)
<option value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row mt-2 align-items-center">
<div class="col-6">
<label class="form-label mt-0">Device Name</label>
<div class="form-group mb-0">
<select :id="'row-' + index" x-model="item" class="form-control" name="item[]">
<option value="-1">Select Device</option>
<template x-for="(item, index) in items" :key="index">
<option :value="item.id" x-text="item.item_name"></option>
</template>
</select>
</div>
</div>
<div class="col-2">
<button class="btn bg-gradient-danger custom-add-icon-btn" type="button" name="button"
#click="removeField(field)">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
</template>
</div>
</div>
<script>
function addNewWithDropdown() {
return {
fields: [],
addNewField() {
this.fields.push({
id: new Date().getTime() + this.fields.length
});
},
removeField(field) {
this.fields.splice(this.fields.indexOf(field), 1);
}
}
}
function devicesData() {
return {
brand: '',
items: {},
item: '',
getItems() {
fetch(`api/my-api-route/${this.brand}`)
.then((res) => res.json())
.then((res) => {
this.items = res;
})
}
}
}
</script>
my-controller.php
<?php
public function today_buy_sales(){
$brands = Brand::orderBy('brand_name', 'asc')->get();
return view('layouts.my-blade-view', compact('brands'));
}
public function getItems($id){
$items = Item::where('brand_id', $id)->get();
return response()->json($items);
}
?>
Related
When I input data in text input and then click button "Save Task" data will show is list in bottom descend. Now i console.log I want to show data when after click button. I don't know how to get data show when after click button "Save Tasks" so I did console.log
app.html
<div class="form-group" *ngIf="saveTask">
<div class="form-row">
<div class="form-group col-md-12">
<label for="subjectTask" class="control-label">Subject Task</label>
<input formControlName="subjectTask" type="text" class="form-control" id="subjectTask"
placeholder="Subject Task">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="assignDev" class="control-label">Assign Dev</label>
<select formControlName="assignTasks" name="assignTasks" class="form-control" id="assignTasks">
<option value="">choose dev...</option>
<option *ngFor="let staff of Staff" [ngValue]="staff.fullName">
{{staff.firstName}} {{staff.lastName}}
</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="deadline" class="control-label">Deadline</label>
<input formControlName="deadlineDate" type="number" class="form-control" id="deadlineDate"
placeholder="Deadline">
</div>
</div>
<div class="form-row">
<div class="form-group mr-5">
<button type="button" class="btn btn-light btn-cancel">Cancel</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onTasksSubmit()">Save Tasks</button>
</div>
</div>
</div>
app.ts
onTasksSubmit() {
const subject = this.editTicket.controls.subjectTask.value
const assignTasks = this.editTicket.controls.assignTasks.value
const deadlineDate = this.editTicket.controls.deadlineDate.value
this.newTask = {
subject, assignTasks, deadlineDate
}
this.depositTasks.push(this.newTask)
this.clearTask()
console.log(this.newTask);
// this.saveTask = false;
}
clearTask() {
this.editTicket.patchValue({
subjectTask: '',
assignTasks: '',
deadlineDate: ''
})
}
saveTasks() {
if (this.depositTasks.length != 0) {
console.log('do');
for (let i = 0; this.depositTasks.length > i; i++) {
console.log(this.depositTasks);
this.ticketService.setAddTasks(
this.id,
this.depositTasks[i]
)
}
}
}
<p *ngFor="let task of depositTasks">{{task?.subject}}</p>
try to use the depositTasks array in template as shown above.
I'm trying to push input value into an array based on input fields. But the problem I'm facing here is that the last input field will replace all the objects in my array like this:
[
{
"label":"4",
"type":"",
"process":"",
"name":"5",
"col":"6"
},
{
"label":"4",
"type":"",
"process":"",
"name":"5",
"col":"6"
}
]
What I'm expecting it to return is the value of each input in each field separately. This means that instead of seeing the object above, it should be label: 1, name: 2, col: 3 etc etc in the correct order. I'm not sure what I'm missing here because my code makes sense to me. What am I doing wrong?
$(document).ready(() => {
$('.add-field').click(e => {
e.preventDefault();
generateField();
});
$('.form-maker').submit(e => {
e.preventDefault();
const temp = {},
payload = [];
$('.dynamic-group').each((i, group) => {
$(group)
.find('input, select')
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push(temp);
});
console.log(payload);
});
const generateField = () => {
$('.dynamic-fields').append(
`
<div class="form-inline dynamic-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Label</div>
</div>
<input type="text" class="form-control" placeholder="Input Label" name="label">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Type</div>
</div>
<select name="type" name="type">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Process</div>
</div>
<select name="process" name="process">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Name</div>
</div>
<input type="text" class="form-control" placeholder="Input Name" name="name">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">DB. Col Name</div>
</div>
<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
</div>
</div>
<hr />
`
);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>
<button class="add-field">
Add Field
</button>
<button type="submit">
Make Form
</button>
It's because you're referencing the same object every time, so the last thing to get updated wins. You'd want a copy of the object pushed into the array:
$('.dynamic-group').each((i, group) => {
$(group)
.find('input, select')
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push($.extend(true,{},temp));
});
There are a number of ways to make object copies - in this case I'm using JQuery's extend method to make a true copy of the object, https://api.jquery.com/jquery.extend/
$.extend(true,{},temp)
The temp variable must be placed within the inner loop of each group:
$(document).ready(() => {
$(".add-field").click(e => {
e.preventDefault();
generateField();
});
$(".form-maker").click(e => {
e.preventDefault();
const payload = [];
$(".dynamic-group").each((i, group) => {
const temp = {};
$(group)
.find("input, select")
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push(temp);
});
console.log(payload);
});
const generateField = () => {
$(".dynamic-fields").append(
`
<div class="form-inline dynamic-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Label</div>
</div>
<input type="text" class="form-control" placeholder="Input Label" name="label">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Type</div>
</div>
<select name="type" name="type">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Process</div>
</div>
<select name="process" name="process">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Name</div>
</div>
<input type="text" class="form-control" placeholder="Input Name" name="name">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">DB. Col Name</div>
</div>
<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
</div>
</div>
<hr />
`
);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>
<button class="add-field">
Add Field
</button>
<button class="form-maker" type="submit">
Make Form
</button>
I cannot understand and find a solution to this problem. I'm trying to edit a pub schedule using an edit form:
pubs/UpdateProfile.vue
<template>
<confirm title="Edit Pub" ok="Save pub" :show="show"
v-on:save="save"
v-on:close="close">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Pub name" v-model="data.name">
</div>
</div>
<div class="field">
<label class="label">Address</label>
<div class="control">
<input class="input" type="text" placeholder="Pub address" v-model="data.address">
</div>
</div>
<div class="field">
<label class="label">Latitude</label>
<div class="control">
<input class="input" type="number" placeholder="Pub latitude" v-model="data.latitude">
</div>
</div>
<div class="field">
<label class="label">Longitude</label>
<div class="control">
<input class="input" type="number" placeholder="Pub longitude" v-model="data.longitude">
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="email" v-model="data.email">
</div>
</div>
<div class="field">
<label class="label">Phone</label>
<div class="control">
<input class="input" type="text" placeholder="Pub phone" v-model="data.phone">
</div>
</div>
<div class="field">
<label class="label">Description</label>
<div class="control">
<input class="input" type="text" placeholder="Pub description" v-model="data.description">
</div>
</div>
<div class="field">
<label class="label">Web</label>
<div class="control">
<input class="input" type="text" placeholder="Pub web" v-model="data.web">
</div>
</div>
<div class="field">
<label class="label">Twitter</label>
<div class="control">
<input class="input" type="text" placeholder="Pub twitter" v-model="data.twitterUrl">
</div>
</div>
<div class="field">
<label class="label">Facebook</label>
<div class="control">
<input class="input" type="text" placeholder="Pub facebook" v-model="data.facebookUrl">
</div>
</div>
<div class="field">
<label class="label">Instagram</label>
<div class="control">
<input class="input" type="text" placeholder="Pub instagram" v-model="data.instagramUrl">
</div>
</div>
<!--Tapps-->
<div class="field">
<label class="label">Tapps</label>
<div v-for="tapp in data.tappsDisplayed" class="control">
<input class="input" type="text" placeholder="Pub tapps" v-model="tapp.name">
<div class="button is-danger" #click="deleteTappFromPub(tapp.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
<br>
</div>
<div class="field">
<label class="label">Añadir Tapps</label>
<div class="select">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option :value ="1">CRAFT_BEER</option>
<option :value ="2">SOMETHING_SWEET</option>
<option :value ="3">FREE_TAPA</option>
<option :value ="4">PUB_TERRACE</option>
<option :value ="5">WIFI</option>
<option :value ="6">FOOTBALL_MATCHES</option>
<option :value ="7">ANIMALS_ALLOWED</option>
<option :value ="8">CREDIT_CARD_PAYMENT</option>
<option :value ="9">GLUTEN_FREE</option>
<option :value ="10">VEGETARIAN_DIET</option>
<option :value ="11">BREAKFAST</option>
<option :value ="12">BRUNCH</option>
</select>
</div>
<br>
<br>
<div class="button is-info" #click="addTappToPub()">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Add Tapp</span>
</div>
</div>
<!--Tapps-->
<!--Beers-->
<div class="field">
<label class="label">Beers</label>
<div v-for="beer in data.beersDisplayed" class="control">
<input class="input" type="text" placeholder="Pub beers" v-model="beer.name">
<div class="button is-danger" #click="deleteBeerFromPub(beer.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
<br>
</div>
<div class="field">
<label class="label">Añadir Beers</label>
<div class="select">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option :value ="1">ESTRELLA_GALICIA</option>
<option :value ="2">MAHOU</option>
<option :value ="3">SAN_MIGUEL</option>
<option :value ="4">HEINEKEN</option>
<option :value ="5">OTHERS</option>
<option :value ="6">AMSTEL</option>
<option :value ="7">ESTRELLA_DAMN</option>
</select>
</div>
<br>
<br>
<div class="button is-info" #click="addBeerToPub()">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Add Beer</span>
</div>
</div>
<!--Beers-->
<!--Brands-->
<div class="field">
<label class="label">Brands</label>
<div v-for="brand in data.brandsDisplayed" class="control">
<input class="input" type="text" placeholder="Pub brands" v-model="brand.name">
<div class="button is-danger" #click="deleteBrandFromPub(brand.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
<br>
</div>
<div class="field">
<label class="label">Añadir Brands</label>
<div class="select">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option :value ="1">COCA_COLA</option>
<option :value ="2">SCHWEPPES</option>
<option :value ="3">PEPSICOLA</option>
<option :value ="4">GIN_TONIC</option>
<option :value ="5">SIDRA_EL_LADRON</option>
</select>
</div>
<br>
<br>
<div class="button is-info" #click="addBrandToPub()">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Add Brand</span>
</div>
</div>
<!--Brands-->
<!--Pub Photo-->
<div class="field">
<label class="label">Pub photo</label>
<div class="input-group">
<span class="input-group-addon">Imagen:</span>
<input class="form-control" type="file" v-on:change="updatePhoto">
</div>
<br>
</div>
<!--Pub Photo-->
<!--Set pub schedules-->
<div class="field">
<label class="label">Schedules</label>
<div v-for="schedule in data.schedulesDisplayed" class="control">
<div class="container">
<div class="field">
<label class="label">Week Day: {{schedule.week_day}}</label>
</div>
<div class="row">
<div class="col">
<div class="row">
Opening Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.opening_time">
</div>
<div class="row">
<div class="buttons is-left">
<div class="button is-info" #click="updateOpeningTime(schedule)">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Save</span>
</div>
<div class="button is-danger" #click="deleteOpeningTime(schedule.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
Closing Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.closing_time">
</div>
<div class="row">
<div class="buttons is-left">
<div class="button is-info" #click="updateClosingTime(schedule.id)">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Save</span>
</div>
<div class="button is-danger" #click="deleteClosingTime(schedule.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
<br>
</div>
<!--Set pub schedules-->
<!--Set pub as suggested/non-suggested-->
<div class="field">
<label class="checkbox">
Set pub as suggested <input type="checkbox" v-model="data.suggested">
</label>
</div>
<!--Set pub as suggested/non-suggested-->
</confirm>
<script>
import Pub from "../../models/pub";
export default {
data() {
return {
selected: null,
data: new Pub(),
}
},
props: {
show: Boolean,
data: Object,
},
computed: {
},
methods: {
save() {
this.$emit('save', this.data);
},
close() {
this.$emit('close');
},
hasRootPermissionsAndIsNotRoot() {
return this.CONSTANTS.hasRootPermissions() &&
this.data.permissions !== this.CONSTANTS.ROOT_USER.permissions;
},
deleteTappFromPub(pubtapp) {
this.api.delete('/pubtapps/' + this.data.id + '/' + pubtapp).then(response => {
this.data = response.data;
});
},
addTappToPub(){
this.api.post('/pubtapps/' + this.data.id + '/' + this.selected).then(response => {
this.data = response.data;
});
},
deleteBeerFromPub(pubbeer) {
this.api.delete('/pubbeers/' + this.data.id + '/' + pubbeer).then(response => {
this.data = response.data;
});
},
addBeerToPub(){
this.api.post('/pubbeers/' + this.data.id + '/' + this.selected).then(response => {
this.data = response.data;
});
},
deleteBrandFromPub(pubbrand) {
this.api.delete('/pubbrands/' + this.data.id + '/' + pubbrand).then(response => {
this.data = response.data;
});
},
addBrandToPub(){
this.api.post('/pubbrands/' + this.data.id + '/' + this.selected).then(response => {
this.data = response.data;
});
},
updateOpeningTime(schedule){
this.api.put('/pubschedules/' + this.data.id, schedule).then(response => {
data = response.data;
});
},
updatePhoto(event) {
let photo=null;
if(event && event.target && event.target.files.length){
photo = event.target.files[0];
}
this.api.multipart('/pubphoto/' + this.data.id, {'photo': photo});
}
}
}
and where I write my updateOpeningTime function:
updateOpeningTime(schedule){
this.api.put('/pubschedules/' + this.data.id + '/' + schedule).then(response => {
this.data = response.data;
});
},
In my controller:
PubsController.php
public function updateOpeningTime(Pub $pub)
{
json_die("Hola");
json_die($pub->id);
Schedule::where(['pub_id', $pub->id])->update(['opening_time' => request()->all()]);
}
pub.js
export default class Pub {
constructor() {
this.id = null;
this.name = null;
this.schedulesDisplayed = null;
}
};
schedulesDisplayed comes from a relation between Pub and Schedule models (pubSchedules: 1pub x N schedules):
/**
* #return \Illuminate\Database\Eloquent\Collection
*/
public function getSchedulesDisplayedAttribute()
{
return $this->pubSchedules()->get();
}
When I click on my Save button after editing I can display the message "Hola" that I have in my controller, but I have the following errors that doesn't allow me to continue developing my form:
app.js:56802 [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
found in
---> <UpdateProfile> at
resources/assets/js/components/pubs/UpdateProfile.vue
<Pubs> at resources/assets/js/components/Pubs.vue
<Root>
I cannot find something called 'name' that I'm using in my function and .vue view. What am I doing wrong?
Your updateOpeningTime function should be something like this:
updateOpeningTime(schedule) {
var instance = this;
this.api.put('/pubschedules/' + this.data.id, schedule).then(response => {
instance.data = response.data;
});
}
Otherwise inside the "then" of the API call the word this is not referencing to the instance of your component.
I am trying to make dynamic form inputs with vue.js. Here is my HTML code.
<div id="multi">
<form action="{{route('flighttickets.searchMulti')}}" method="post" class="container-fluid">
{{csrf_field()}}
<div class="row" v-for="(item, index) in items">
<div class="form-group col col-sm-3">
<select v-bind:name="inputName(index, 'from')" v-model="item.from" class="form-control" required>
<option disabled selected value=''>From</option>
#foreach($locations as $location)
<option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
#endforeach()
</select>
</div>
<div class="form-group col col-sm-3">
<select v-bind:name="inputName(index, 'to')" v-model="item.to" class="form-control" required>
<option disabled selected value=''>To</option>
#foreach($locations as $location)
<option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
#endforeach()
</select>
</div>
<div class="form-group col col-sm-3">
<input type="date" class="form-control" v-model="item.date" v-bind:name="inputName(index, 'date')" required>
</div>
<div class="col-auto" v-if="index >= min">
<button type="button" #click="removeItem(index)" class="close pull-left" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
</div>
<div class="row form-group" v-if="items.length <= max">
<div class="col col-sm-3 offset-sm-6">
<button type="button" #click="addItem()" class="btn btn-primary pull-right"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row form-group">
<div class="col col-sm-3 offset-sm-6">
<button type="submit" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Search</button>
</div>
</div>
</form>
</div>
The script
var multi = new Vue({
el: '#multi',
data: {
min: 2,
max: 7,
item:{from:'', to:'', date:''},
items:[ { from: '', to: '', date: '' }, {from: '', to: '', date: ''} ]
},
methods: {
removeItem: function(id) {
if(this.items.length >= this.min){
this.items.splice(id, 1);
}
},
addItem: function() {
if(this.items.length <= this.max) {
var clone = JSON.parse(JSON.stringify(this.item));
this.items.push(clone);
}
},
inputName: function(index, property) {
return "items["+index+"]["+property+"]";
}
}
});
vue.js does not do looping accordingly. According to the script, the form input should show at least 2 and without cancel button when it is less than or equal to 2. But it is not working. see the picture.
It turned out like the blade engine has some issues while compiling. I put this file in a folder together with other views. I found out that the other view had an error. Only then, this file seems to work fine. That's how i fixed it. No code changes needed to this file. Thanks you everyone for your time.
I have a table that look like :
here i can define how many rows and columns i want on my table and the table get updated as i want, at here everything fine, the next step i need is to change the content of each cell and bind it to an array, i really don't know how to accomplish this, seems like contenteditable has some issues with v-model.
Another problem is that i don't know how to pass the data to my data object, should i pass it as a matrix? a array? i need to know each input for the specific row and columns, any help?
here is what i did so far:
<template>
<div>
<form class="form-horizontal">
<h2 class="text-center"> Table </h2>
<div class="form-group">
<div class="col-md-1">
<button #click="changeView('appTableStyle')" type="button" class="form-control btn btn-xs btn-warning">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</div>
<label for="rows" class="control-label col-md-1">style:</label>
<div class="col-md-6">
<select class="form-control" v-model="table.tableStyle">
<option v-for="(item,key) in tableStyles" :value="item.Id">
{{ item.style }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="rows" class="control-label col-md-2">rows:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="table.rows" class="form-control" id="rows">
</div>
<label for="columns" class="control-label col-md-1">columns:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="table.cols" class="form-control" id="cols">
</div>
<label for="columns" class="control-label col-md-2">How Many?:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="insert" class="form-control" id="cols">
</div>
</div>
<table class="table table-responsive" style="background-color:lightGray">
<tbody>
<tr v-for="(row,idx2) in tableRows">
<td v-model="table.colsArr[idx]" :key="" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-9">
<div class="text-center">
<button type="submit" #click.prevent="addTable" class="btn btn-success margin-above2 btn-block">Add Table</button>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
table: {
rows: 1,
cols: 1,
key: 'Table',
tableStyle: 1,
colsArr: []
},
insert: 1
}
},
methods: {
},
changeView: function (view) {
this.$store.commit('changeCurrentView', view)
}
},
computed: {
tableStyles () {
return this.$store.getters.getTableStyles
},
tableRows () {
return parseInt(this.table.rows)
},
tableCols () {
return parseInt(this.table.cols)
}
}
}
</script>