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函数将description通过data:发送到URL指定的控制器中的函数。

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

Answer 1

this中的this.description指向ajax对象，声明let self = this;使其成为self； self.description。

另外，请使用Axios而不是Ajax，这样可以避免很多麻烦。

Answer 2

我对语法进行了简单的更改，同时更改了@Quinten的建议，现在它可以正常工作。

true

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

2 个答案: