Разбор данных из компонента vue с помощью ajax
У меня есть компонент vue под названием «testrow». В нем у меня есть форма с двумя вариантами выбора: 1-й - «описание», 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 у меня есть «описание», где находится значение «описание», которое я хочу.
Спасибо за ответ! Я просто сделал это, используя data: {description: this.something}, где что-то предопределено. Я изменил свою функцию в своем контроллере, чтобы отразить значение «чего-то». Это сообщение об ошибке, которое я получил от Vue Devtools: Uncaught TypeError: Невозможно прочитать свойство «что-то» неопределенного в VueComponent.populate (create: 743) в вызывающем (app.js: 38145) в HTMLSelectElement.fn._withTask.fn._withTask (приложение.js:37944)
Ответы 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"/>
Спасибо за ваш отзыв! Теперь я понимаю, что мне нужен способ сослаться на область, в которой я нахожусь. К сожалению, этот метод не сработал, есть ли другие способы сослаться на область?
тогда похоже, что этого описания не существует, ни как модель, ни как бутафория. Может быть, вы должны предоставить его в шаблоне и данных в качестве модели?
Ага! Я избегал добавления дополнительных реквизитов, но добавил описание в данные root и назвал значение с данными {description: vm.description}, спасибо!
это работает, это не совсем то, что мне нужно в данном случае, но это круто.
Вы пытались использовать: data: {description: this.description}