I put here a picture to see my Vue App.
In my Select form, i have two values :
-$keys which get me the amout referenced to my id
-$values which get me the ID in my options.
I wrote my code like that :
<select data-validation="number" class="form-control" style="width:200px" v-model="cash.bank">
#foreach ($users as $keys => $values)
<option value="{{ $keys }}" > {{ $values }}</option>
#endforeach
</select>
My v-model=cash.bank return the value of $keys. i need to return also for cash.id the value of $value.
My double post and put function script :
addCash: function () {
axios.post('/addglentrycash', this.cash)
.then(response => {
console.log(response.data);
if (response.data.etat) {
this.cash = {
id: 0,
codeentry: response.data.etat.codeentry,
description: response.data.etat.description,
cash: response.data.etat.cash,
};
}
})
.catch(error => {
console.log('errors: ', error)
})
updateBank:function(){
axios.put('/updatebank', this.cash)
.then(response => {
if (response.data.etat) {
this.cash = {
id: (I need to write something)
cash: response.data.etat.cash,
bank:response.data.etat.bank,
};
}
})
.catch(error => {
console.log('errors: ', error)
})
},
This is my vue app :
Related
I am using Laravel 7 and Vue.js 2.
I make a delete call with axios and if everything is correct I receive as a response the new data in the related tables to update a select and if there is an error I receive the errors of the Laravel validator.
The problem is that I have to understand with javascript if the response is an error or not... but I don't know how to do that.
This is my Vue component:
<template>
<form method="DELETE" #submit.prevent="removeTask">
<div class="form-group">
<title-form v-model="titleForm" :titleMessage="titleForm"></title-form>
</div>
<hr>
<div class="form-group">
<label for="tasks">Tasks:</label>
<select required v-model="user.tasks" class="form-control" id="tasks" #mouseover="displayResults(false, false)">
<option v-for="task in tasks_user" :value="task.id" :key="task.id">
{{ task.task_name }} - {{ task.task_description }}
</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<hr>
<div class="form-group">
<validated-errors :errorsForm="errors" v-if="displayErrors===true"></validated-errors>
<!--<success-alert :success_message="successMessage" v-if="displaySuccess===true"></success-alert>-->
</div>
</form>
</template>
<script>
import ValidatedErrors from "./ValidatedErrors.vue"
import SuccessAlert from "./SuccessAlert.vue"
import TitleForm from "./TitleForm.vue"
export default {
components: {
'validated-errors': ValidatedErrors,
'success-alert': SuccessAlert,
'title-form': TitleForm
},
mounted() {
console.log('Component mounted.');
},
props: {
tasks_user: {
type: Array,
required: true,
default: () => [],
}
},
computed: {
titleForm: function () {
return "Remove a task from " + this.tasks_user[0].user_name;
}
},
data: function() {
return {
user: {
tasks: ""
},
errors: {},
displayErrors: false,
displaySuccess: false,
successMessage: "The task has been removed."
}
},
methods: {
removeTask: function() {
alert(this.user.tasks);
//axios.delete('/ticketsapp/public/api/remove_task_user?id=' + this.user.tasks)
axios.delete('/ticketsapp/public/api/remove_task_user?id=' + 101)
.then((response) => {
console.log(response.data);
if(typeof response.data[0].task_id !== "undefined") {
alert("There are no errors.");
} else {
alert("There are errors.");
}
if (typeof response.data[0].task_id === "undefined") { //problem
alert('noviva');
console.log(response.data);
this.errors = response.data;
this.displayErrors = true;
} else {
alert('viva');
this.tasks_user = response.data;
this.errors = {};
}
})
.catch(error => {
alert(noooooo);
console.log(error);
});
},
displayResults(successShow, errorShow) {
this.displayErrors = errorShow;
this.displaySuccess = successShow;
}
},
}
</script>
This is my method in the controller:
public function remove(Request $request) {
$validator = Validator::make($request->all(), [
'id' => 'required|exists:task_user,id'
]);
if ($validator->fails()) {
return response($validator->errors()); //problem
}
$task_user_id = $request->id;
$user_id = TaskUser::where('id', $task_user_id)->pluck('user_id')->first();
TaskUser::find($task_user_id)->delete();
$tasks_user = TaskUser::with(['user', 'task'])->get();
$tasks_user = TaskUser::where('user_id', $user_id)->get();
$tasks_user = TaskUserResource::collection($tasks_user);
return json_encode($tasks_user);
}
To distinguish the type of return I created this condition: if (typeof response.data[0].task_id === "undefined") but when that condition is true everything falls down and I receive the following error in the console:
Uncaught (in promise) ReferenceError: noooooo is not defined
So how can I do to distinguish the type of return of the API call?
I am using Vue.js 2 with Laravel 7.
I must do an insert to the db through a form submit but I am unable to get the option key of a select.
This is the select:
<div class="form-group">
<label for="room">Room:</label>
<select v-model="room" class="form-control" id="room">
<option v-for="room in rooms" :key="room.id">
{{ room.name }}
</option>
</select>
</div>
This is the script:
export default {
props: ['hours'],
mounted() {
console.log('Component mounted.');
this.loadUsers();
this.loadRooms();
},
data: function() {
return {
users: [],
rooms: [],
room: ''
}
},
methods: {
onCreate: function (args) {
let value = this.$refs.textareaObj.value;
alert(value);
},
loadUsers: function() {
axios.get('api/users')
.then((response) => {
this.users = response.data.data;
})
.catch(function(error) {
alert('noviva');
console.log(error);
});
},
loadRooms: function() {
axios.get('api/rooms')
.then((response) => {
this.rooms = response.data.data;
})
.catch(function(error) {
alert('noviva');
console.log(error);
});
},
insertMeeting: function() {
alert(this.room);
}
}
}
In the insert, I need to get the id of the room but I don't know how to do that. The function insertMeeting should alert that id. By the way, in that alert appears only the option value (room.name) but I am interested in the option key (room.id).
Can help?
Bind the option's value to its room's id, which will be stored in the room property bound to its parent, select, via v-modal:
<select v-model="room" class="form-control" id="room">
<option v-for="room in rooms" :value="room.id" :key="room.id">
{{ room.name }}
</option>
</select>
Demo here
I created a component that can add additional fields by pressing a button. I don't know how would I submit this in the database with axios.post and laravel controller. I was able to achieve it in the past with the use of jquery and pure laravel, but I'm confused how to implement it in vue and axios.
Component.vue
<template>
<v-app>
<table class="table">
<thead>
<tr>
<td><strong>Title</strong></td>
<td><strong>Description</strong></td>
<td><strong>File</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" :key="row.id">
<td><v-text-field outlined v-model="row.title" /></td>
<td><v-text-field outlined v-model="row.description" /></td>
<td>
<label class="fileContainer">
<input type="file" #change="setFilename($event, row)" :id="index">
</label>
</td>
<td><a #click="removeElement(index);" style="cursor: pointer">X</a></td>
</tr>
</tbody>
</table>
<div>
<v-btn #click="addRow()">Add row</v-btn>
<v-btn class="success" #click="save()">Save</v-btn>
<pre>{{ rows | json}}</pre>
</div>
</v-app>
</template>
<script>
export default {
data: ()=> ({
rows: []
}),
methods: {
addRow() {
var elem = document.createElement('tr');
this.rows.push({
title: "",
description: "",
file: {
name: 'Choose File'
}
});
},
removeElement(index) {
this.rows.splice(index, 1);
},
setFilename(event, row) {
var file = event.target.files[0];
row.file = file
},
save() {
// axios.post
}
}
}
</script>
Controller.php
public function store(Request $request)
{
// store function
}
save() {
let data = this.rows
axios
.post("Url", {
data
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err)
});
}
ref link https://github.com/axios/axios
save() {
axios
.post("/your/uri", {
user_id: 1,
user_name:'jhone doe',
email:'test#test.com'
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error)
});
}
You can retrieve your data from your controller $request->user_id,...,$request->email
Tip: if you post any object,you must JSON.stringify(your_json) them and in a response data from controller json_decode($your_json,true) or you need to modify your header file.
Always use '/your/uri' instead of /your/uri/ without trailing '/'
It now works. I'll be posting my code just in case someone encounter the same hurdle. Than you very much to #kamlesh-paul and #md-amirozzaman
Component.vue
<script>
export default {
data: ()=> ({
rows: [],
}),
methods: {
addRow() {
this.rows.push({
corporate_objective_id: '',
kpa: '',
kpi: '',
weight: '',
score: '',
equal: '',
file: {
name: 'Choose File'
}
});
},
removeElement(index) {
this.rows.splice(index, 1);
},
setFilename(event, row) {
var file = event.target.files[0];
row.file = file
},
save() {
const postData = {
data: this.rows
}
console.log(postData)
axios
.post('/api/employee-objective', {postData})
.then(res => { console.log(res) })
.catch(err => { console.log(err) });
}
}
}
</script>
Controller.php
public function store(Request $request) {
foreach($request->data as $data) {
$container = EmployeeObjective::updateOrCreate([
'kpa_info' => $data['kpa'],
'kpi_info' => $data['kpi'],
'kpa_weight' => $data['weight'],
'kpa_score_1' => $data['score'],
'kpa_equal' => $data['equal'],
]);
$container->save();
}
}
I'm writing my first Laravel Vue component and I have this error in console.
[Vue warn]: Computed property "options" was assigned to but it
has no setter.
The code is about two select dropdowns, one with continents and one with countries. I want that when I update the continent the countries get updated.
I just miss to update the options of the second select with the updated values that I have in this.countries.
After the continent change the this.countries variable get updated but the values of the options of the country_id select are not changing.
I've tried adding computed but I get this error.
What am I doing wrong?
<template>
<div>
<div class="form-group continent_id">
<select name="continent_id" v-model="continent_selected" id="continent_id" class="selectpicker" data-live-search="false" title="Pick a continent" v-on:change="getAllCountries(continents)">
<option v-if="continents.length>0" v-for="continent in continents" v-bind:value="continent.id">
{{ continent.name }}
</option>
</select>
</div>
<div class="form-group country_id">
<select name="country_id" v-model="country_selected" id="country_id" class="selectpicker" data-live-search="true" title="Pick a country">
<option v-for="(country, index) in countries" v-bind:value="country.id" >
{{ country.name }}
</option>
</select>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
this.loadData();
},
data() {
return {
continents: [],
countries: [],
continent_selected: '',
country_selected: '',
}
},
computed: {
get: function () {
return this.countries;
},
set: function (newValue) {
this.countries = newValue;
}
},
methods: {
loadData: function() {
axios.get('/api/continents')
.then((response) => {
// handle success
this.continents = response.data.data;
this.getAllCountries(this.continents);
})
.catch((error) => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
},
getAllCountries: function(continents) {
console.log(this.continent_selected);
console.log(continents);
var j = 0;
this.countries = [];
for (var i = 0, len = continents.length; i < len; i++) {
if (!this.continent_selected){
for (var key in continents[i].active_countries) {
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
else{
console.log("continent selected: "+ this.continent_selected);
for (var key in continents[i].active_countries) {
if (continents[i].id == this.continent_selected){
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
}
}
}
},
}
</script>
I have solved my issue that was mainly related to the computed set method of the variable optionCountries.
The dropdown was not updating because it use Bootsrap Select, so in order to show the new options it needs to be refreshed.
I've also figure out that I need to add a timeout to the refresh request.
This is the final code.
<template>
<div>
<div class="form-group continent_id">
<select name="continent_id" v-model="continent_selected" id="continent_id" class="selectpicker" data-live-search="false" title="Pick a continent" v-on:change="getAllCountries(continents)">
<option v-if="continents.length>0" v-for="continent in continents" v-bind:value="continent.id">
{{ continent.name }}
</option>
</select>
</div>
<div class="form-group country_id">
<select name="country_id" v-model="country_selected" id="country_id" class="selectpicker" data-live-search="true" title="Pick a country">
<option v-for="(country, index) in optionCountries" v-bind:value="country.id" >
{{ country.name }}
</option>
</select>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
this.loadData();
},
data() {
return {
continents: [],
countries: [],
continent_selected: '',
country_selected: '',
}
},
computed: {
optionCountries:{
get: function () {
return this.countries;
},
set: function (newValue) {
this.countries = newValue;
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
}
}
},
methods: {
loadData: function() {
axios.get('/api/continents')
.then((response) => {
// handle success
this.continents = response.data.data;
this.getAllCountries(this.continents);
})
.catch((error) => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
},
getAllCountries: function(continents) {
var j = 0;
this.countries = [];
for (var i = 0, len = continents.length; i < len; i++) {
if (!this.continent_selected){
for (var key in continents[i].active_countries) {
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
else{
for (var key in continents[i].active_countries) {
if (continents[i].id == this.continent_selected){
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
this.optionCountries = this.countries;
}
}
}
},
}
</script>
In this line you are setting the value of options attribute:
this.options = this.options;
, but, this property is computed:
computed: {
options: function(event) {
return this.countries
}
},
In this case you can:
create a computed setter: https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter
computed: {
options: {
get: function () {
return this.countries;
},
set: function (newValue) {
this.countries = newValue;
}
}
},
Set the value directly:
this.countries = this.options;
My problem is I'm trying to loop and array from Axios query into my blade template, query is giving me no errors but tells me is undefined multiple times on my select tag.
I have a simple Axios query from my Laravel Controller:
public function consultaPersonas()
{
$consulta = persona::all();
if(!$consulta) {
$consulta = ['error' => 'No hay registros'];
}
return $consulta;
}
this query will bring me this little array:
[
{"cedula":"15678453","nombre":"LUIS CHACON","edad":30},
{"cedula":"2536524","nombre":"MARIO ORTEGA","edad":21},
{"cedula":"25632541","nombre":"VANESSA ALCALA","edad":24}
]
This is the Select Tag i want to loop:
<select class="form-control" v-model="nombre">
<option v-for="nom in nombre">#{{ nombre }}</option>
</select>
Here's my Vuejs code:
var app = new Vue({
el: '#root',
data: {
cedula: '',
nombre: [],
},
watch: {
cedula: function() {
this.nombre = ''
if (this.cedula.length == 1) {
this.buscarCedula()
this.nombre = "Consultando cédula...";
}
}
},
methods: {
buscarCedula: _.debounce(function() {
axios.get('http://localhost/miapp/public/personas/mostrar')
.then(function(response) {
let datos = response.data;
let validar = datos.error;
if (!validar) {
app.nombre =
datos.cedula + ' - ' +
datos.nombre + ' - ' +
datos.edad;
} else {
app.nombre = validar;
}
})
.catch(function(error) {
app.nombre = error;
})
}, 500)
}
What am I doing wrong? Thanks.
js:
created():
axios.get('http://localhost/miapp/public/personas/mostrar')
.then(function (response){
this.nombre = response.data;
}).catch(function (error) {
console.log(error);
})
html:
<select class="form-control" v-model="nombre">
<option v-for="nom in nombre">#{{ nom.nombre }}</option>
</select>
Next, you transfer from the created method call axios to methods, and in created call this method. This initializes your initial data
I find out what was wrong,
I had two problems, one was my view tags variables, this is the right way since i need to loop through my nom object with his index like this:
<select class="form-control" v-model="nombre">
<option v-for="nom in nombre">#{{ nom.cedula }}</option>
</select>
the second problem was my return at my vuejs file, i was returning one single output into a loop, this is the right way:
var app = new Vue({
el: '#root',
data: {
cedula: '',
nombre: [],
},
watch: {
cedula: function() {
this.nombre = ''
if (this.cedula.length == 1) {
this.buscarCedula()
this.nombre = "Consultando cédula...";
}
}
},
methods: {
buscarCedula: _.debounce(function() {
axios.get('http://localhost/miapp/public/personas/mostrar')
.then(function(response) {
if (!response.data.error) {
return app.nombre = response.data;
} else {
return app.nombre = response.data.error;
}
})
.catch(function(error) {
app.nombre = error;
})
}, 500)
}
)};