Currently, I am in the process of developing a request management system for the organization. The key requirements for this project include:
- Ability to add a new row for each new request.
- Dynamic generation of parameters based on the selected description of the request. Each parameter should be displayed alongside its respective description.
- Storage of descriptions and parameters as arrays for easy retrieval.
To tackle these requirements, our team has opted to utilize vue.js for front-end scripting integrated within a blade template in the Laravel framework.
Vue.component('request', {
props: ["index"],
// Template for every individual row of test
template: `
<tr>
<td>@{{ index }}</td>
<td>
<select :name="description" @change="populate" required>
<option value="" selected disabled>--Select--</option>
@foreach ($types->sortBy('description') as $type)
<option value="{{$type->description}}">{{$type->description}}</option>
@endforeach
</select>
</td>
<td>
<select :name="parameter" required >
<option >@{{ shared.parameter.parameter1 }}</option>
<option >@{{ shared.parameter.parameter2 }}</option>
<option >@{{ shared.parameter.parameter3 }}</option>
</select>
</td>
`,
data(){
return{
// bind the name field of the form, for submission
shared: store,
description: 'tests['+this.index+'][description]',
parameters: 'tests['+this.index+'][parameter]',
something: 2,
}
}
,
methods: {
populate: ()=>{
var self = this.index;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url:'/parametersByDescription',//this is specified in web routes
type: 'POST',
data: {description: this.description},
success: function(data){
store.parameter = data;
}
})
return;
}
}
})
let store = {
parameter: [],
The index variable increments using a method within the root component. When a new row is added, it triggers the generation of a substantial portion of the form through the request vue.component template. The populate function sends the selected description via data: to the designated controller endpoint specified by the URL.
However, an issue arises at this stage. I encounter difficulties in parsing the selected description within the populate function. Despite seeing the description value in Vue Devtools, attempting to access it results in an error:
Uncaught TypeError: Cannot read property 'description' of undefinedsomething produces the same error. My main goal is to successfully retrieve and manipulate the chosen description value. Your assistance on this matter would be greatly appreciated. Thank you.