I am first using input in vue js . this input have structure like this
induk_id:'',
nama_barang:'',
qtt:'',
satuan:'',
harga:'',
harga_total:'',
keterangan:'',
status:'Aktif',
this induk_id is foreign key on another table , but i dont know how to pass this induk_id on this vue .
i use laravel vue js and this is controller and route
public function input_detail($id)
{
$pencairan = IndukPencairan::findOrFail($id);
if (!$pencairan)
abort(404);
return view('pengadaan.inputdetail',['pencairan' => $pencairan]);
}
this controller on laravel blade i can pass like $pencairan->id for this induk_id , but how i can pass this on vue ?
and its my route
Route::get('input_detail/{id}', 'PengadaanController#input_detail')->name('input_detail');
and its my export default
export default {
data(){
return{
count: 0,
userData:[{
induk_id:'',
nama_barang:'',
qtt:'',
satuan:'',
harga:'',
harga_total:'',
keterangan:'',
status:'Aktif',
}],
}
},
components:{
},
methods:{
submit() {
this.errors = {};
axios.post('/pengadaan/store_induk_pencairan', this.userData).then(response => {
window.location = response.data.redirect;
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
AddField: function () {
this.userData.push({ induk_id: '',nama_barang: '' ,qtt: '' ,satuan: '',harga: '' ,harga_total: '',
keterangan: '' ,status: 'Aktif',
});
}
},
my question is how i retrieve induk_id in vue js ?
Your question is quite unclear, it needs a better explanation. Do you mean how to pass the 'induk_id' on axios post request. If that's the case, it's quite easy.
Call the submit function on vue passing the induk_id paramater whenever you want to action to be performed.
<button #click="submit(induk_id)"> Submit </button>
Then in methods, accept the parameter and concat using template literals ``
submit(id) {
this.errors = {};
axios.post(`/pengadaan/store_induk_pencairan/${id}`, this.userData).then(response => {
window.location = response.data.redirect;
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
}
That's it, if its something you are looking for. But I'm not sure if you were asking about this, just my assumptions. Feel free to add more details.
<template>
<div>{{ response_data }}</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
formdata: {
induk_id: "",
nama_barang: "",
qtt: "",
satuan: "",
harga: "",
harga_total: "",
keterangan: "",
status: "Aktif",
},
response_data: null,
};
},
methods: {
submit() {
axios
.get(`input_detail/${this.formdata.induk_id}`)
.then((response) => {
this.response_data = response.data;
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style lang="scss" scoped></style>
Related
My code looks like this
child component.vue
<script>
export default {
props: ['Pconvs_id'],
data(){
return{
user : '',
messages:[],
newMessage : '',
convs_id: '',
}
},
created(){
this.convs_id = this.Pconvs_id;
this.fetchMessages();
},
methods:
{
fetchMessages()
{
console.log(this.convs_id);
axios.get('messages',{cons_id: this.convs_id}).then(response=> {
this.messages = response.data;
});
axios.get('authuser').then(response=>{
this.user = response.data;
});
},
},
watch: {
// whenever convs_id changes, this function will run
Pconvs_id: function (newConvs_id, oldConvs_id) {
this.convs_id = newConvs_id;
this.fetchMessages();
}},}
</script>
parent component.vue
<Message :Pconvs_id="convs_id"/>
my problem is that even when the convs_id changed fetchmessage() return same data what did i do wrong
axios call handler
public function fetchmessages(Request $cons_id)
{
return Message::where([
['cons_id' , $cons_id],
])->with('user')->get();
}
Elequent relationship
message model beongsTo user and User hasMany message
I think your backend handler receives an instance of Illuminate\Http\Request
so to get the cons_ids you should to something like
public function fetchmessages(Request $request)
{
// Get the cons_id from the request object
$cons_id = $request->get('cons_id');
// Cleaned up your "where" query
return Message::where('cons_id', $cons_id)->with('user')->get();
}
I am follow this Link for a inertiaJS tutorial. BTW I'm using laravel 8
I have this image below from my webpage. I don't know why I don't have a page>errors in picture given. Is there any other way to validate a form other than the link that I provided?.
I commented out the page.error in my HTML because it causes me an error Error in render: "TypeError: Cannot read property 'email' of undefined" because of my Page.Error is an empty object.
Update : Code for my controller
Script Code
<script>
import Layout from "../../Shared/Layout";
export default {
components: {
Layout,
},
data() {
return {
lead: {
name: "",
email: "",
phone: "",
dob: "",
interested_package: "",
},
};
},
methods: {
async handleSubmit() {
let res = await this.$inertia.post("/leads/save", this.lead);
},
},
};
</script>
App Service Provider
public function boot()
{
//
Schema::defaultStringLength(255);
Inertia::share([
'errors' => function () {
return Session::get('errors')
? Session::get('errors')->getBag('default')->getMessage()
: (object)[];
}
]);
Inertia::share('flash', function () {
return [
'message' => Session::get('message'),
'success' => Session::get('success'),
'error' => Session::get('error'),
];
});
}
To access the email error, context needs to be added via the this keyword ie. this.$page.props.errors.email.
Hey i think you are not sharing error bag in Controller that is why is empty ,to solve this, go to your AppServiceProvider
and add this code.
Inertia::share([
'errors' => function () {
return Session::get('errors')
? Session::get('errors')->getBag('default')->getMessages()
: (object) [];
},
]);
So i am trying to fetch data in my vue component as you can see below. But because iam reqesting the fetch from my blade view in public/manage-users-projects the url becomes
http://localhost:8080/ProjsiteWebApp/app/public/manage-users-projects/get-projects-json
but i want to fetch data from this url
http://localhost:8080/ProjsiteWebApp/app/public/get-projects-json
So i can i sort of return one route and execute from the public folder?
export default {
created(){
this.fetchProjects();
},
methods:{
fetchProjects() {
fetch('get-projects-json')
.then(res => res.json())
.then(res => {
console.log(res.data);
})
}
}
};
Route::get('get-projects-json', 'ProjectsController#getProjectsJson');
You can pass the route as props to the component inside the blade file.
Inside the view:
<component get-projects-json="{{ url('get-projects-json') }}"></component>
Inside the vue component:
<script>
export default {
props: ['getProjectsJson'],
}
</script>
Then you can access the route inside the component like so:
export default {
created(){
this.fetchProjects();
},
methods:{
fetchProjects() {
fetch(this.getProjectsJson)
.then(res => res.json())
.then(res => {
console.log(res.data);
})
}
}
};
You can learn more about props here: https://v2.vuejs.org/v2/guide/components-props.html
I have more then 8000 records in DB. I need a solid pagination and filtering functionality. To accomplish that I am trying to filter the records before paginate and send out those to endpoint.
For example in controller I request the keyword and check the keyword using →when() if there is keyword then filter records with that and →paginate(20)
in controller
public function bridal(Request $request)
{
$keyword = $request->get("keyword");
$bridals = Place::with(["plans" => function($query)
{
$query->orderBy("plans.plan_price");
}
])
->whereHas("plans")
->groupBy("address")
->when($keyword, function($query, $keyword){
return $query->where("city", $keyword);
})
->paginate(20);
return $bridals;
}
Route
Route::match(["GET", "POST"], "bridal", "Api\BridalController#bridal");
I guess everything is fine 'till here. So let's continue in frontend side.
in vuex: Store.js
state: {
bridals: [],
keyword: "",
},
mutations: {
setBridals(state, bridal){
state.bridals = bridal;
},
setKeywords(state, keys){
state.keyword = keys;
},
},
getters: {
getBridals(state){
return state.bridals;
},
},
actions: {
bridalApi({commit}, payload){
axios.get("api/bridal?page="+payload.page, {
keyword: payload.forms.keyword
})
.then(response => {
this.commit("setBridals", response.data);
})
.catch(e => {
console.log(e);
})
},
}
and in home component I am sending filter params to controller.
<form #submit.prevent="submit" method="post">
<search-bar />
<submit-btn />
</form>
mounted(){
this.$store.dispatch("bridalApi", {
page: this.currentPage,
forms: this.filterParams,
});
},
methods: {
submit(){
this.$store.dispatch("bridalApi", {
forms: this.filterParams,
});
},
},
computed: {
filterParams(){
let paramObj = {
keyword: this.$store.state.bridal.keyword,
}
return paramObj;
}
},
I am not sure what is wrong in the code. Where do I make mistake.
P.S: By the way I set and get the keyword state.keyword... it's working fine. I can get the value. I just didn't add input code here...
My UserController Function:
public function profile()
{
return auth('api')->user();
}
i'm working on project that frontend with vue and backend with laravel.
My Vue.js Code:
import Form from 'vform';
export default {
data () {
return {
form: new Form({
id:'',
name: '',
email: '',
password: '',
type:'',
bio:'',
photo:''
})
}
},
mounted() {
console.log('Component mounted.')
},
created(){
axios.get("api/profile")
.then( ({data}) => (this.form.fill(data)))
}
}
i try to show data in form, but when i call this function it not return the data. what i am doing wrong? i know there is problem with this function this.form.fill(data) but i don't know what actual the problem is.