Question

我有一个名为“ testrow”的vue组件。在其中，我有一个带有2个选择的表格，第一个是“描述”，第二个是“参数”。我的脚本应以“参数”根据数据库中相应的“描述”更改的方式运行。这是通过我的网络路由调用控制器中的一个函数来完成的。我在函数中使用ajax的方法称为“填充”，如下所示：

methods: {
        populate: ()=>{
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url:'/parametersByDescription',
                type: 'POST',
                data: {description: description},
                success: function(data){ 
                    store.parameter = data;
                }
            })              
            return;
        }
    }

我在将“描述”值作为名为“描述”的键发送到我的函数时遇到了麻烦，因为在下面的代码部分中未定义它：

data: {description: description},

我找不到我要使用的“描述”值的正确名称。通常，将使用{description：vm.description}，因为这是vue组件，并且模板中的所有数据，方法和：name都被隔离在称为“ testrow”的组件中，我不知道其“名称”是什么是。

在Vue Devtools中，我具有Root和Testrow，并且在Testrow / data中，我具有“ description”，该值是我想要的“ description”值所在的位置。

Answer 1

通常，在不更改范围的情况下应使用this，因此在箭头功能内，应使用以下方式：this.description。

但是，当您使用jQuery或其他一些外部库时，范围会更改，然后this会引用其他对象。

解决方案是将Vue对象分配给一些新变量，然后在更改的范围内使用该变量。另外，请确保已将description声明为prop或模型，并将其定义为：

data(){
    return{
        description : '', //declare and define
    }
},
methods: {
    populate: ()=>{
        var self = this; //assigning Vue's this to self variable
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url:'/parametersByDescription',
            type: 'POST',
            data: {description: self.description}, //using it instead of this.
            success: function(data){
                self.store.parameter = data; //probably needed here too
            }
        })
        return;
    }
}

因此，除了在组件的模板中提供描述作为模型外：

<input v-model="description"/>

使用Ajax

1 个答案: