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

Question

我正在为我的公司制作一个请求管理系统。 要求是:

-能够添加新的请求行。

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

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

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

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随着root方法中的函数增加。完成此操作后，还会添加一个新行。添加另一行的整个基础是 vue.component request 中的模板生成大部分表单的原因。 populate 函数通过 data: 将我的 description 发送到 Controller 中由 URL 指定的函数。

这就是我开始遇到问题的地方。我需要解析我在 populate 函数中的表单中选择的 description，但是我找不到要使用的特定术语。在 Vue Devtools 中，我可以将 description 视为数据值之一，但当我尝试解析 时，出现 Uncaught TypeError: Cannot read property 'description' of undefined这个.描述。我还将 2 的值硬编码为 something 并尝试解析它，但出现了相同的错误。我只需要获取这个特定的 description 值，其他一切都应该顺利运行。感谢您抽出时间。

Answer 1

this在this.description引用ajax对象，声明let self = this;所以它变成self ; self.description 。

另外，请使用 Axios 而不是 Ajax，它可以为您省去很多麻烦。