Разбор данных из vue-компонента с помощью ajax

Question

У меня есть компонент vue, называемый "testrow".Внутри него есть форма с 2 вариантами выбора, 1-й - «описание», 2-й - «параметр».Мой сценарий должен работать так, чтобы «параметр» изменялся в соответствии с соответствующим «описанием» в моей базе данных.Это делается с помощью функции в моем контроллере, вызываемой моим веб-маршрутом.Я использую ajax в своей функции в методах, называемых «populate», следующим образом:

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", которое я хочу использовать.Как правило, используется {description: vm.description}, так как это компонент vue, и все данные, методы и: имя из шаблонов изолированы внутри компонента с именем «testrow», и я не знаю, каково его «имя»."is.

В Vue Devtools у меня есть Root и Testrow, а в Testrow / data у меня есть" description ", где находится нужное значение" description ".

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