使用ajax从vue组件解析数据

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

我无法将“description”值作为名为“description”的键发送到我的函数，因为它在下面的代码部分中未定义：

data: {description: description},

我找不到想要使用的“描述”值的正确名称。但是，通常会使用 {description: vm.description}，因为这是一个 vue 组件，模板中的所有数据、方法和 :name 都在名为“testrow”的组件中隔离，我不知道它的“名称”是什么"是。

在 Vue Devtools 中，我有 Root 和 Testrow，在 Testrow/data 中，我有我想要的“描述”值所在的“描述”。

Answer 1

通常，在没有改变作用域的情况下，你应该使用this，所以在箭头函数中，它会这样使用：this.description。

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

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

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"/>