1
Я пытаюсь сделать что-то с JQuery и Vue.js:сделки с результатом postJSON
А вот мой сценарий часть:
<script>
function initVM(result) {
// alert(result.num)
var vm2 = new Vue({
el: '#vm2',
data: {
// ③bind one item of the result as example
rrr: result.num
}
});
$('#vm2').show();
}
$(function() {
var vm = new Vue({
el: '#vm',
data: {
content: ''
},
methods: {
submit: function(event) {
event.preventDefault();
var
$form = $('#vm'),
content = this.content.trim();
// ①post textarea content to backend
$form.postJSON('/api/parse', {
content: content
}, function(err, result) {
if (err) {
$form.showFormError(err);
}
else {
// ②receive a result dictionary
$('#vm').hide();
initVM(result);
}
});
}
}
});
});
</script>
Вот мой HTML часть:
<html>
<form id="vm", v-on="submit: submit">
<textarea v-model="content" name="content"></textarea>
<button type="submit">Have a try!</button>
</form>
<div id="vm2" style="diplay:none;">
<!-- ④show the result-->
The result:
{{ rrr }}
</div>
</html>
Вот определение postJSON
<script>
// ...
postJSON: function (url, data, callback) {
if (arguments.length===2) {
callback = data;
data = {};
}
return this.each(function() {
var $form = $(this);
$form.showFormError();
$form.showFormLoading(true);
_httpJSON('POST', url, data, function (err, r) {
if (err) {
$form.showFormError(err);
$form.showFormLoading(false);
}
callback && callback(err, r);
});
});
// ...
// _httpJSON
function _httpJSON(method, url, data, callback) {
var opt = {
type: method,
dataType: 'json'
};
if (method==='GET') {
opt.url = url + '?' + data;
}
if (method==='POST') {
opt.url = url;
opt.data = JSON.stringify(data || {});
opt.contentType = 'application/json';
}
$.ajax(opt).done(function (r) {
if (r && r.error) {
return callback(r);
}
return callback(null, r);
}).fail(function (jqXHR, textStatus) {
return callback({'error': 'http_bad_response', 'data': '' + jqXHR.status, 'message': 'something wrong! (HTTP ' + jqXHR.status + ')'});
});
}
</script>
Процесс может быть описан как:
- сообщение содержания бакэнда
- Получает результат и скрыть форму
- Создайте новый Vue с результатом
- показать результатом является div, который привязан к новому экземпляру Vue.
A В конце концов, я успешно получаю результат, что подтверждается заявлением alert(result.num), но ничего не найдено в vm2 's div кроме The result:
Где находится проблема? Или, пожалуйста, будьте свободны научить меня более простому подходу, если есть, потому что я не думаю, что то, что я использую, является хорошим.
@Tomalak К сожалению, мой извиниться! Что значит, я не использовал 'vm2'? Как это использовать? Извините, что задал этот наивный вопрос. – Spike
Вы определяете переменную 'vm2', но никогда не используете ее нигде, но вы правы, это не должно меняться. – Tomalak
@Tomalak Итак, когда вы хотите реализовать этот процесс, что такое хорошая практика? – Spike