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

Question

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

-能够添加新的请求行。

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

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

为了解决这个问题，我们使用 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: [],

index 在 root 方法中随函数增加。这样做时还会添加一个新行。添加另一行的整个基础是 vue.component request 中的模板生成大量表单的原因。 populate 函数通过data: 将我的description 发送到URL 指定的控制器中的函数。

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

Answer 1

我根据@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;
        }

    }

})

Answer 2

this.description中的this指的是ajax对象，声明let self = this;就变成self； self.description。

另外顺便说明一下，使用 Axios 代替 Ajax，这样可以省去很多麻烦。