Trouble finding specific data in Vue component with method within the same component

Question

I am making a request management system for my company. The requirements are:

-Able to add a new row of the request.

-Choosing the description of the request will generate the parameters to be chosen. Parameters are on the same row as its respective description.

-Store the description and parameter as an array.

To approach this, we've used vue.js to do scripting 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 $types)
                <option value="{{$types->description}}">{{$types->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: [],

index increases with a function in methods of root. A new row is also added when done so. The whole basis of adding another row is the reason a large chunk of the form is generated by the template in vue.component request. The populate function sends my description through data: to the function in my controller specified by the URL.

This is where I start having problems. I need to parse the description I have selected in the form in the populate function, however I can't find the specific term to use. In Vue Devtools, I can see description as one of the data values but I get Uncaught TypeError: Cannot read property 'description' of undefined when I try to parse this.description. I have also hard-coded the value of 2 into something and tried to parse it, however the same error appears. I just need to get this particular description value and everything else should run smoothly. Thank you for your time.

Quinten · Accepted Answer · 2019-02-27 04:10:52Z

1

The this in this.description refers to the ajax object, declare let self = this; so it becomes self; self.description.

Also as a side note, use Axios instead of Ajax, it saves you from a lot of trouble.

answered Feb 27, 2019 at 4:10

Quinten

1142 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jinghang Over a year ago

I just tried this method but I still can't parse the key; value pair into my function. I'm still going to use ajax for now but I'll explore Axios soon enough!

Quinten Over a year ago

What happens if you define your request data before the ajax call? So let data = { “description”: this.description}

Quinten Over a year ago

Also try to return sent parameters in your api controller to see what it’s actually receiving

Jinghang Over a year ago

Yep, for troubleshooting, I've been trying to send something and expecting 2 to be returned by the modified function. If I simply use data: {description: "something else"}, it is able to return the string something else. Therefore I am rather certain that it is the value of the key:value pair that needs work. Thanks for your suggestions!

Jinghang · Accepted Answer · 2019-02-28 02:27:52Z

I made a simple change in syntax together with the suggestion made by @Quinten and it works now.

   data: function(){
        return{
            // bind the name field of the form, for submission
            shared: store,
            description: 'tests['+this.index+'][description]',
            parameters: 'tests['+this.index+'][parameter]',
            something: 2, //some placeholder value, I am adding another variable in my actual code along with the template of the component
        }
    }
    ,
    methods: {
        populate: function(){
            var self = this.something;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url:'/parametersByDescription',//this is specified in web routes
                type: 'POST',
                data: {description: self},
                success: function(data){
                    store.parameter = data;
                }
            })
            return;
        }

    }

})

Collectives™ on Stack Overflow

Trouble finding specific data in Vue component with method within the same component

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related