Javascript 在同一组件中使用方法查找Vue组件中的特定数据时遇到问题

我正在为我的公司申请一个管理系统。 这些要求是：

-能够添加请求的新行

-选择请求的描述将生成要选择的参数。参数与其各自的说明位于同一行

-将描述和参数存储为数组

为了解决这个问题，我们使用vue.js在Laravel框架中的刀片模板中编写脚本

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: [],

索引随根方法中的函数而增加。执行此操作时，还会添加新行。添加另一行的整个基础是vue.component请求中的模板生成表单的一大块的原因。populate函数通过data:将我的描述发送到由URL指定的控制器中的函数

这就是我开始有问题的地方。我需要解析我在填充函数的表单中选择的描述，但是我找不到要使用的特定术语。在Vue Devtools中，我可以将description视为数据值之一，但我得到了未捕获的TypeError:当我尝试解析此.description时，无法读取undefined的属性“description”。我还将2的值硬编码为一些内容，并尝试对其进行解析，但出现了相同的错误。我只需要得到这个特定的描述值，其他一切都应该顺利运行。感谢您的时间。

本说明中的this.description指的是ajax对象，声明let self=this；所以它变成了自我；自我描述

另外，请注意，使用Axios而不是Ajax，这样可以省去很多麻烦。

本文中的this.description指的是Ajax对象，声明let self=this；所以它变成了自我；自我描述

---

另外，作为一个补充说明，使用Axios而不是Ajax，它为您省去了很多麻烦。

我在语法上做了一个简单的更改，并结合@Quinten的建议，现在可以使用了

   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;
        }

    }

})

---

我在语法上做了一个简单的修改，并结合@Quinten的建议，现在可以使用了

   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;
        }

    }

})

---

我刚刚尝试了这个方法，但仍然无法解析密钥；将值对导入到我的函数中。我现在仍然打算使用ajax，但我会尽快探索Axios！如果在ajax调用之前定义请求数据，会发生什么？因此，让data={“description”：this.description}也尝试返回api控制器中发送的参数，以查看它实际接收的是什么。是的，为了进行故障排除，我一直在尝试发送一些内容，并希望修改后的函数返回2。如果我只使用data:{description:something other}，它就能够返回字符串something other。因此，我相当肯定，需要工作的是key:value对的值。谢谢你的建议！我刚刚尝试了这个方法，但仍然无法解析密钥；将值对导入到我的函数中。我现在仍然打算使用ajax，但我会尽快探索Axios！如果在ajax调用之前定义请求数据，会发生什么？因此，让data={“description”：this.description}也尝试返回api控制器中发送的参数，以查看它实际接收的是什么。是的，为了进行故障排除，我一直在尝试发送一些内容，并希望修改后的函数返回2。如果我只使用data:{description:something other}，它就能够返回字符串something other。因此，我相当肯定，需要工作的是key:value对的值。谢谢你的建议！