Question

我正在尝试用jQuery和Vue.js实现一些东西：

这是我的脚本部分：

<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中显示结果

实际上，我确实收到了成功的结果，alert(result.num)声明证明了这一结果，但除vm2

The result:

问题出在哪里？或者，如果有的话，请自由地教我一个更简单的方法，因为我不认为我使用的是一个好的方法。

Answer 1

这是提问者。

最后我发现了问题所在。

问题出在 Mustache ：{{ }}

我使用 jinja2 ，一个用于Python的模板引擎和 Vue.js ，一个MVVM前端框架。他们都使用{{ }}作为分隔符。

所以如果有人和我一样陷入困境，我认为不会有，请：

app.jinja_env.variable_start_string = '{{ '
app.jinja_env.variable_end_string = ' }}'  # change jinjia2 config

OR

Vue.config.delimiters = ['${', '}'] # change vue config

处理postJSON的结果

1 个答案: