We Keep Coding

Adding and deleting VueJS form input

i am new to vue js, i have one "iban" entry that I want to do and when "add iban" button is clicked, first entry "delete" range should be added and when I want to delete it starts from above, I think I made a mistake. Thanks already for your help.
<template>
<div class="col-12" v-for="(section, index) in sections">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="iban" v-model="section.item">
</div>
</div>
<div class="mb-1 row" v-for="(addition, index) in section.additionals">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="addition.item">
<span class="float-right" style="cursor:pointer" #click="removeItem(index)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(index)">New Iban</button>
</div>
</template>
<script>
export default {
data() {
return {
data: {
iban: "",
},
sections: [
{
item: '',
additionals: []
}
]
}
},
methods: {
addNewItem(id) {
this.sections[id].additionals.push({
item: ''
})
},
removeItem(index){
this.sections[index].additionals.splice(index,1)
},
},
}
</script>

Looking at your updated post & images, I think you are looking for the following:
new Vue({
el: "#app",
data() {
return {
data: {
iban: "",
},
sections: [{
ibans: [{item: ""}]
}]
}
},
methods: {
addNewItem(id) {
this.sections[id].ibans.push({item: ''});
},
removeItem(sectionIndex, ibanIndex) {
this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="col-12 sections" v-for="(section, sectionIndex) in sections">
<div class="mb-1 row" v-for="(iban, ibanIndex) in section.ibans">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="iban.item">
<span v-if="section.ibans.length>1"
class="float-right" style="cursor:pointer" #click="removeItem(sectionIndex, ibanIndex)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(sectionIndex)">New Iban</button>
</div>
</template>
</div>

I think this code could help you.
<template>
<div class="col-12">
<div
class="mb-1 row"
v-for="(item, index) in sections.additionals"
:key="index"
>
<div class="col-sm-3">
<label for="iban" class="col-form-label">
<span><i data-feather="file-text"></i></span>IBAN NUMBER
</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="iban" v-model="item.item" />
<span
class="float-right"
style="cursor: pointer"
#click="removeItem(index)"
>X</span
>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem">
New Iban
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
iban: "",
},
sections: { additionals: [{ item: "" }] },
};
},
methods: {
addNewItem() {
this.sections.additionals.push({
item: this.data.iban,
});
},
removeItem(index) {
this.sections.additionals.splice(index, 1);
},
},
};
</script>

How can I provide edit feature in html vue js stored in an array?

This is my json response
{"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]}]}
This is the response of the data I am getting for implementing the edit functionality.
I am adding the data in the format shown below:
<div class="card-content" v-for="(bok, index) in rules" :key="index">
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Booked Under Act/Rule</label>
<select class="form-control" v-model="bok.name">
<option value="Act,1972">Act,1972</option>
<option value="Rule,2012">Rule,2012</option>
<option value=" Act,1961">1961</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Sec</label>
<input type="text" class="form-control" v-model="bok.section" >
</div>
</div>
</div>
<div class="row" v-if="bok.name == 'Act,1972'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Ar(if any)</label>
<input type="text" class="form-control" v-model="bok.data[0].head" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == 'Act,1961'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Select</label>
<select class=" form-control" v-model="bok.data[0].head">
<option value="1">Wild</option>
<option value="2">croach</option>
<option value="3">Ill</option>
<option value="4">pass</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" v-if="bok.data[0].head == 1">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Area </label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">icted</label>
<input type="text" class="form-control" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.data[0].head == 4">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">No.</label>
<input type="text" class="form-control" required="" v-model="bok.data[0].value">
</div>
</div>
</div>
</div>
<a #click="addNewRules">Add Another Rule</a>
I am sending this data as
addForm = new Vue({
el: "#addForm",
data: {
no:'',
Date: '',
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
},
methods: {
addNewRules: function() {
this.rules.push({ name: null, section: null,data:[{head:null,value:null}] });
},
},
}
So, how can I able to implement edit feature to the rules[].
How can I able to map the same. Also after edit I need to update the values in the format
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
So, during edit how can I able to call rules[] from the json data. Please help me to have a answer for the same. I am really confused how to have an answer for the problem.
As the html given, I need to provide an html containing select for all the options i got the json response

If you just want to read the data from the JSON response, or add the data to the Vue app/form, then:
You could add this code somewhere in the page, after you've initialized the addForm Vue app:
// This could be just *part* of the full JSON response/data, but this is the expected
// format of the data that you assign to `json_res`.
const json_res = {"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]};
(function() {
var d = json_res.data[0] || {};
addForm.no = d.no;
addForm.Date = d.Date;
d.rules.forEach(function(r) {
addForm.rules.push({
name: r.name,
section: r.section,
data: [{
head: r.data[0].head,
value: r.data[0].value
}]
});
});
})();
Demo
UPDATE
Or a simpler way, but could get tricky, is:
// This would be defined before initializing `addForm`.
const json_res = {"status":true,"data":[{"_id":"5afd20c8aae8bd215cc3c33e","no":131,"Date":"2000-01-01T00:00:00.000Z","__v":0,"rules":[{"name":"Act,1972","section":"12","_id":"5afd20c8aae8bd215cc3c341","data":[{"head":"no","value":"","_id":"5afd20c8aae8bd215cc3c342"}]},{"name":"Act,1961","section":"42,12","_id":"5afd20c8aae8bd215cc3c33f","data":[{"head":"1","value":"12","_id":"5afd20c8aae8bd215cc3c340"}]}]}]};
addForm = new Vue({
el: "#addForm",
data: function() {
// This would include `_id`, etc.
return json_res.data[0];
},
methods: {
...
}
});

How do I pass data in $router.push in Vue.js?

I am creating an alert component for a CRUD app using Vue.js. I want a message to be passed to another component once data has been saved. Currently I am trying to pass this data in $router.push like this this.$router.push({path: '/', query: {alert: 'Customer Added'}}) Then access this data in another component. However this is not working as expected, instead the data is passed into the url.
This is the component which saves the data, Add.vue
<template>
<div class="add container">
<Alert v-if="alert" v-bind:message="alert" />
<h1 class="page-header">Add Customer</h1>
<form v-on:submit="addCustomer">
<div class="well">
<h4>Customer Info</h4>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" placeholder="First Name"
v-model="customer.first_name">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name"
v-model="customer.last_name">
</div>
</div>
<div class="well">
<h4>Customer Contact</h4>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email" v-model="customer.email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" placeholder="Phone" v-model="customer.phone">
</div>
</div>
<div class="well">
<h4>Customer Location</h4>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Address" v-model="customer.address">
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" placeholder="City" v-model="customer.city">
</div>
<div class="form-group">
<label>State</label>
<input type="text" class="form-control" placeholder="State" v-model="customer.state">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
<script>
import Alert from './Alert'
export default {
name: 'add',
data () {
return {
customer: {},
alert:''
}
},
methods: {
addCustomer(e){
if(!this.customer.first_name || !this.customer.last_name ||
!this.customer.email){
this.alert = 'Please fill in all required fields';
} else {
let newCustomer = {
first_name: this.customer.first_name,
last_name: this.customer.last_name,
phone: this.customer.phone,
email: this.customer.email,
address: this.customer.address,
city: this.customer.city,
state: this.customer.state
}
this.$http.post('http://slimapp.dev/api/customer/add',
newCustomer)
.then(function(response){
this.$router.push({path: '/', query: {alert: 'Customer
Added'}})
});
e.preventDefault();
}
e.preventDefault();
}
},
components: {
Alert
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only
-->
<style scoped>
</style>
This the alert component, Alert.vue
<template>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
{{message}}
</div>
</template>
<script>
export default {
name: 'alert',
props: ['message'],
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
And this is the component where the alert is to be viewed, Customers.vue
<template>
<div class="customers container">
<Alert v-if="alert" v-bind:message="alert" />
<h1 class="page-header">Manage Customers</h1>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="customer in customers">
<td>{{customer.first_name}}</td>
<td>{{customer.last_name}}</td>
<td>{{customer.email}}</td>
<td></td></tr>
</tbody>
</table>
</div>
</template>
<script>
import Alert from './Alert';
export default {
name: 'customers',
data () {
return {
customers: [],
alert: ''
}
},
methods: {
fetchCustomers(){
this.$http.get('http://slimapp.dev/api/customers')
.then(function(response){
this.customers = (response.body);
});
}
},
created: function(){
if (this.$route.params.alert) {
this.alert = $route.params.alert
}
this.fetchCustomers();
},
updated: function(){
this.fetchCustomers();
},
components: {
Alert
}
}
How do I solve this?

It is not possible to pass data through vue-router the way you want to. You only can pass parameters like this:
Route definition:
{ path: '/products/:id/edit', name: 'products.edit', component: ProductForm },
And then you can get the parameter with this.$route.params.id
Or you can do:
this.$router.push({name: 'products.index', params: { id: 1 }})
I suggest you to add a GET parameter like ?success=true or show an alert with sweetalert for example before pushing the new route.

A weird solution is to set the value to store/local_storage and retrieve and destroy it from the store/local_storage when the destination page loads.

What causes VueJS to stop updating the DOM in this instance?

I've looked on every similar post that I can find, but no answer seems to fix my issue. Specifically, it does not update the table with id "table".
HTML:
<section id="body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading" id="panel">
<div class="row">
<div class="col-sm-12">
<h3 class="panel-title">Filters</h3>
</div>
</div>
</div>
<div class="panel-body" id="panel-body">
<div class="row">
<div class="col-sm-12">
<form id="filterForm" class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<label class="control-label" for="focusedInput">Category:</label>
<select id="category" class="js-example-basic-single form-control">
<option value="">Any</option>
<option v-for="category in categories" value="category.categoryTitle">
{{category.categoryTitle}}</option>
</select>
</div>
</div>
<div class="form-inline row">
<div class="col-sm-12">
<label class="control-label" style="margin-right:20px;">Air Date:</label>
<div style="width:35%" class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" v-model="airDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label class="control-label">Show Number:</label>
<input style="width:35%" class="form-control" type="number" id="showNumber" v-model="showNumber">
</div>
</div>
<div class="form-inline row">
<div class="col-sm-12">
<label class="control-label">Question contains:</label>
<input style="width:35%" class="form-control" type="text" v-model="questionText">
<label class="control-label">Dollar Value:</label>
<input style="width:35%" class="form-control" type="number" id="showNumber" v-model="dollarValue">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-offset-9 col-sm-3" style="margin-top:5px;">
<button type="button" class="btn btn-warning" v-on:click="reset">Reset Filters</button>
<button type="button" class="btn btn-primary" v-on:click="filter">Filter</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary" id="tableCard" style="margin-bottom:20px; margin-top:40px;">
<div class="panel-heading">
<div class="row">
<div class="col-sm-10">
<h3 class="panel-title">Jeopardy Questions</h3>
</div>
<div class="col-sm-2">
<span id="totalQuestionsSpan">Total Entries: {{entries.length}} entries</span>
</div>
</div>
</div>
<div class="panel-body" style="padding-top:45px;">
<div class="wrapper">
<table id="tableScroll" class="table table-striped table-fixed">
<thead style="background-color:white;">
<tr>
<th style="cursor:pointer; min-width: 110px;">
Question
<span v-if="questionSort == 1" id="questionUp">▲</span>
<span v-else-if="questionDown == -1" id="questionDown">▼</span>
</th>
<th style="cursor:pointer; min-width: 120px; ">
Answer
<span v-if="answerSort == 1" id="answerUp">▲</span>
<span v-else-if="answerDown == -1" id="answerDown">▼</span>
</th>
<th style="cursor:pointer; min-width: 80px;">
Value
<span v-if="valueSort == 1" id="valueUp">▲</span>
<span v-else-if="valueDown == -1" id="valueDown">▼</span>
</th>
<th style="cursor:pointer; min-width: 80px;">
Show Number
<span v-if="showNumberSort == 1" id="showNumberUp">▲</span>
<span v-else-if="showNumberDown == -1" id="showNumberDown">▼</span>
</th>
<th style="cursor:pointer; min-width: 80px;">
Category
<span v-if="categorySort == 1" id="categoryUp">▲</span>
<span v-else-if="categoryDown == -1" id="categoryDown">▼</span>
</th>
<th style="cursor:pointer; min-width: 80px;">
Air Date
<span v-if="airDateSort == 1" id="airDateUp">▲</span>
<span v-else-if="airDateDown == -1" id="airDateDown">▼</span>
</th>
</tr>
</thead>
<tbody id="table">
<tr v-for="entry in entries">
<td>{{entry.questionText}}</td>
<td>{{entry.answerText}}</td>
<td>{{entry.dollarValue}}</td>
<td>{{entry.showNumber}}</td>
<td>{{entry.categoryTitle}}</td>
<td>{{entry.airDate}}</td>
</tr>
<tr v-if="entries.length == 0">
<td colspan="6" style="text-align: center;"> No entries to display </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JS
var app = new Vue({
el: '#body',
data: {
loggedIn: false,
questionSort: 0,
answerSort: 0,
valueSort: 0,
showNumberSort: 0,
categorySort: 0,
airDateSort: 0,
entries: [],
url: "/questions",
categories: [],
// form model data
categoryTitle: '',
airDate: '',
questionText: '',
dollarValue: '',
showNumber: '',
},
mounted: function () {
$.get("/api/categories", function(result) {
Vue.set(app, "categories", result.data);
$('.js-example-basic-single').select2();
}, "json").fail(function(err) {
showErrorMessage(err.responseJSON.message_prettified);
});
},
methods: {
filter : function() {
var queryParams = "?";
var params = 0;
app.categoryTitle = $('#category :selected').text().trim();
if (typeof app.categoryTitle !== "undefined" && app.categoryTitle != null) {
params++;
queryParams += "categoryTitle=" + app.categoryTitle
}
if (app.airDate.length > 0) {
params++;
if (params > 0) {
queryParams += "&";
}
queryParams += "airDate=" + app.airDate
}
if (app.questionText.length > 0) {
params++;
if (params > 0) {
queryParams += "&";
}
queryParams += "questionText=" + app.questionText
}
if (app.dollarValue.length > 0) {
params++;
if (params > 0) {
queryParams += "&";
}
queryParams += "dollarValue=" + app.dollarValue
}
if (app.showNumber.length > 0) {
params++;
if (params > 0) {
queryParams += "&";
}
queryParams += "showNumber=" + app.showNumber
}
if (queryParams.length == 1) {
queryParams = "";
}
var url = "/questions"
var URL = url + queryParams;
$.get(URL, result => {
Vue.set(app, "entries", result.data);
app.$forceUpdate();
}, "json").fail(function(err) {
showErrorMessage(err.responseJSON.message_prettified);
}).always(function() {
$("#loader").addClass("toggled");
});
}
}
});
Current behavior:
The AJAX call to /api/categories correctly updates the dropdown on the DOM, allowing me to select a category. When the app is mounted, it does update the table, showing the colspan 6 "No entries to display" cell. However, after the filter request is sent and returns, the table does not update to reflect the updated data (despite the data correctly showing as having been changed when checked in the console).
Expected behavior:
When the AJAX call to /questions with the query params resolves and updates the entries data field in app, the table updates to reflect the changes.
Attempted fixes:
Explored $forceUpdate, $set, Vue.set, and manually overwriting the array using a for loop.
Edit:
After doing a lot of snooping and also integrating VueX (as suggested below by #WaldemarIce) which may have helped but regardless did improve the overall code structure of my mini program, I've arrived to a solution.
This post on Laracast made me wonder whether perhaps there was a data issue: https://laracasts.com/discuss/channels/vue/v-for-loop-rendering-keeps-throwing-undefined-error
Which then caused me to realize the problem was in this line of code here:
<option v-for="category in categories" value="category.categoryTitle">
{{category.categoryTitle}}</option>
Which was causing an issue because category in value="category.categoryTitle" wasn't defined until later in the life cycle. I changed that to v-bind:value="category.categoryTitle" and updated my JS to make it work now. The TypeError that I posted in the follow-up discussions on #Kaicui 's post was causing Vue to lose the reactivity of the data. Once I solved that problem, Vue began to react properly again.
Updated HTML:
<section id="body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading" id="panel">
<div class="row">
<div class="col-sm-11">
<h3 class="panel-title">Filters</h3>
</div>
<div class="col-sm-1">
<i id="toggleFilter" class="fa fa-chevron-down filter-collapsed" style="cursor:pointer; display:none;" aria-hidden="true"></i>
<i id="toggleFilter" class="fa fa-chevron-up filter-collapsed" aria-hidden="true" style="cursor:pointer;"></i>
</div>
</div>
</div>
<div class="panel-body" id="panel-body">
<div class="row">
<div class="col-sm-12">
<form id="filterForm" method="GET" action="/questions" class="form-horizontal">
<div class="form-inline">
<div class="col-sm-12" style="margin-bottom:15px;">
<input type="hidden" name="categoryTitle" id="categoryTitleHidden">
<label class="control-label" for="focusedInput">Category:</label>
<select style="width:90%; height:120% !important;" v-model="categorySelect" id="category" class="js-example-basic-single form-control">
<option value="">Any</option>
<option v-for="category in categories" v-bind:value="category.categoryTitle">
{{category.categoryTitle}}</option>
</select>
</div>
</div>
<div class="form-inline">
<div class="col-sm-12" style="margin-bottom:15px;">
<label class="control-label" style="margin-right:20px;">Air Date:</label>
<div style="width:35%; margin-right:10px" class="form-group">
<div style="width:100%" class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="airDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label class="control-label">Show Number:</label>
<input style="width:35%" class="form-control" type="number" id="showNumber" name="showNumber">
</div>
</div>
<div class="form-inline">
<div class="col-sm-12">
<label class="control-label">Question contains:</label>
<input style="width:35%" class="form-control" type="text" id="questionText" name="questionText">
<label class="control-label">Dollar Value:</label>
<input style="width:35%" class="form-control" type="number" id="dollarValue" name="dollarValue">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-offset-9 col-sm-3" style="margin-top:5px;">
<button type="button" class="btn btn-warning" v-on:click="reset">Reset Filters</button>
<button type="button" class="btn btn-primary" v-on:click="filter">Filter</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary" id="tableCard" style="margin-bottom:20px; margin-top:40px;">
<div class="panel-heading">
<div class="row">
<div class="col-sm-10">
<h3 class="panel-title">Jeopardy Questions</h3>
</div>
<div class="col-sm-2">
<span id="totalQuestionsSpan">Total Entries: {{entryCount}} entries</span>
</div>
</div>
</div>
<div class="panel-body" style="padding-top:45px;">
<div class="wrapper">
<table id="tableScroll" class="table table-striped table-fixed">
<thead style="background-color:white;">
<tr>
<th style="cursor:pointer; min-width: 110px;">
Question
</th>
<th style="cursor:pointer; min-width: 120px; ">
Answer
</th>
<th style="cursor:pointer; min-width: 80px;">
Value
</th>
<th style="cursor:pointer; min-width: 80px;">
Show Number
</th>
<th style="cursor:pointer; min-width: 80px;">
Category
</th>
<th style="cursor:pointer; min-width: 80px;">
Air Date
</th>
</tr>
</thead>
<tbody id="table">
<tr v-if="entriesValid" v-for="entry in entries">
<td>{{entry.questionText}}</td>
<td>{{entry.answerText}}</td>
<td>{{entry.dollarValue}}</td>
<td>{{entry.showNumber}}</td>
<td>{{entry.categoryTitle}}</td>
<td>{{entry.airDate}}</td>
</tr>
<tr v-if="!entriesValid">
<td colspan="6" style="text-align: center;"> No entries to display </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; left: 45%; top:25%; z-index:3;">
<i id="loader" class="fa fa-circle-o-notch fa-spin fa-5x fa-fw toggled" style="z-index:3"></i>
</div>
</section>
Updated JS
Vue.use(Vuex)
Vue.config.debug = false;
Vue.config.silent = true;
var URL;
const store = new Vuex.Store({
state: {
loggedIn: false,
// ordering data
questionSort: 0,
answerSort: 0,
valueSort: 0,
showNumberSort: 0,
categorySort: 0,
airDateSort: 0,
// server related ata
entries: [],
url: "/questions",
categories: [{
categoryTitle: "Test",
}],
},
mutations: {
categories (state, data) {
state.categories = data;
},
entries (state, data) {
console.log(data);
state.entries = data;
console.log(state.entries)
}
},
actions: {
fetchCategories ({ commit }) {
$("#loader").removeClass("toggled");
$.get("/api/categories", function(result) {
commit('categories', result.data);
}, "json")
.fail(function(err) {
if (err.status == 0) {
showErrorMessage("Network Problem");
}
else {
showErrorMessage(err.responseJSON.message_prettified);
}
}).always(function() {
$("#loader").addClass("toggled");
});
},
},
});
var app = new Vue({
el: '#body',
store: store,
data: {
categorySelect: "",
},
mounted: function() {
store.dispatch("fetchCategories").then(() => {
$('.js-example-basic-single').select2();
});
},
computed: {
categories: function() {
return store.state.categories;
},
entryCount: function() {
if (store.entries) {
if (typeof store.entries.length !== "undefined") {
return store.entries.length;
}
else {
return 0;
}
}
else {
return 0;
}
},
entriesValid: function() {
if (store.state.entries) {
if (typeof store.state.entries.length !== "undefined" && store.state.entries.length > 0) {
return true;
}
else {
return false;
}
}
else {
return false;
}
},
entries: function() {
return store.state.entries;
},
loggedIn: function() {
return store.state.loggedIn;
},
},
methods: {
reset: function() {
$('.js-example-basic-single').val('').trigger('change');
$("#datetimepicker1").datetimepicker("clear");
$("#categoryTitleHidden").val("");
$("#showNumber").val("");
$("#questionText").val("");
$("#showNumber").val("");
$("#dollarValue").val("");
},
filter : function() {
var value = $('#category :selected').text().trim();
if (value !== "Any") {
$("#categoryTitleHidden").val(value);
}
else {
$("#categoryTitleHidden").val("");
}
var options = {
success: function(responseText, statusText, xhr, $form) {
store.commit("entries", JSON.parse(xhr.responseText).data)
}
};
$("#filterForm").ajaxSubmit(options);
}
}
});

IMO problem is causing Vue.set(app, ...). AFAIK you can't set properties on Vue instance itself.
EDIT: Live example with Vuex and async data with jQuery
var store = new Vuex.Store({
state: {
// Car manufacturers for datalist will be held here.
// Cars are globally accessible, in every component,
// as this.$store.state.cars
cars: null
},
mutations: {
// Mutations changes state, but must be sync,
// so you can't call $.get() or another
// async function in any mutation.
updateCars: function (state, payload) {
state.cars = payload
}
},
actions: {
// For async ops there are actions,
// but they can't change state - for state
// change fire particular mutation.
loadCars: function (context, payload) {
$.get(payload.src).then(function (data) {
context.commit('updateCars', data)
})
}
}
})
Vue.component('my-list', {
template: '#my-list',
props: ['src'],
// All components see this.$store.state.cars, but
// still can have own local data.
data: function () {
return {
manufacturer: ''
}
},
// Fire async store action
created: function () {
this.$store.dispatch({
type: 'loadCars',
src: this.src
})
}
// Alternatively, you can use this
// version - w/o action. It's OK to use
// mutation here, in callback of async function.
/* created: function () {
$.get(this.src).then(function (data) {
this.$store.commit('updateCars', data)
})
} */
})
new Vue({
el: '#app',
// Inject store state to all components
store: store
})
<div id="app">
<my-list src="https://api.mockaroo.com/api/32318a80?count=20&key=cdbbbcd0">
</my-list>
</div>
<template id="my-list">
<div>
<label>
Choose a car manufacturer:<br>
<input list="cars" name="myCars" v-model="manufacturer">
</label>
<datalist id="cars">
<option
v-for="car in $store.state.cars"
:value="car.car"
>
{{ car.id }}
</option>
</datalist>
<p>
Selected manufacturer:<br>
{{ manufacturer }}
</p>
</div>
</template>
<script src="https://unpkg.com/vue#2.5.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex#3.0.0/dist/vuex.min.js"></script>
<script src="https://unpkg.com/jquery#3.2.1/dist/jquery.min.js"></script>

your code can not run because it relies on your server response.
but i think your code which setting resonse data to entries is fine.
This kind of problems may occur when other js code have caused an exception ,which interrupt the rendering of vue.
so could you check console and see is there any errors?

How to edit and update form input values in vue.js?

I am getting up the details in a form for a hotel entry with basic details and viewing it in Room.vue. The created values were displayed here but here i need to give edit option for the filled details. When i click the edit, the page should redirect to RoomsEdit.vue and i should get the filled up contents in that page with form inputs. For that i have tried the following codes but nothing solves my issue.. Kindly have a go through and help me in solving the issue.
Room.vue:
<table class="table table-striped table-hover rooms-table">
<thead>
<tr>
<td>Title<i class="fa fa-sort"></i></td>
<td>Sub Title<i class="fa fa-sort"></i></td>
<td> Edit </td>
<td> Delete </td>
</tr>
</thead>
<tbody>
<tr v-for="room in items">
<td>{{ room.title }}</td>
<td>{{ room.subtitle }}</td>
<td>
<router-link class="btn btn-primary" v-bind:to="'rooms/edit/'+id">Edit</router-link>
</td>
<td>
<button class="btn btn-primary" v-on:click="deleteRoom(room)">Delete</button>
</td>
</tr>
</tbody>
</table>
Here i am giving edit option and making a redirect to edit page..
Script of Rooms.vue:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
}
}
},
methods: {
deleteRoom: function (room) {
var index = this.items.indexOf(room);
this.items.splice(index, 1);
}
},
mounted() {
axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
}
}
</script>
RoomsEdit.vue:
<form #submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
<span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
</div>
</div>
<div class="form-group">
<label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
<span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
</div>
</div>
</form>
Script of RoomsEdit:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
},
errors: {
}
}
},
methods:{
fetchRoom(id){
axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
},
updateItems(e){
axios.put(config.apiDomain+'/Rooms/edit'+this.$route.params.id,this.itemsData).then(response=>{
this.this.itemsData = "";
this.$router.push('/admin/rooms');
}).catch(error=>{
this.errors = error.response.data;
});
}
},
created: function() {
this.fetchRoom(this.$route.params.id);
}
}
</script>
RoomsCreate.vue:
<form #submit.prevent="addItems" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
<span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
</div>
</div>
<div class="form-group">
<label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
<span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
</div>
</div>
Script of RoomsCreate.vue:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
},
errors: {
}
}
},
methods:{
addItems(){
axios.post(config.apiDomain+'/Rooms',this.itemsData).then(response=>{
this.this.itemsData = "";
this.$router.push('/admin/rooms');
}).catch(error=>{
this.errors = error.response.data;
});
}
}
</script>
The issue i am facing is when i click the edit in Room.vue, it redirects to the RoomsEdit.vue where i am not getting the values that was already created, i need to get those value when i go to RoomsEdit.vue there i should edit and update the content.