Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        <div class="layui-input-block" style="width:510px;">
            <form class="layui-form" action="">
                <select v-model="form.entrCode">
                    <option value="">please select an entry</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </form>
        </div>
    </div>
</body>
</html>

<script src="//cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            action: '',
            form: {
                entrCode: '',
            }
        },
        watch: {
            action: function (val) {
                if (val !== "add"){
                    var vm = this;
                    //$.get("/park/GetLEDDtl", { areaId: vm.form.code }, function (rs) {
                    //    vm.form = rs;
                    //}, "json");

                    //simulate setting on ajax.success
                    vm.form = { "entrCode": "20" };
                }
            },
            "form.entrCode": function (val, old) {
                alert("【entryCode changed】 new:" + val + "    old:" + old);
            }
        },
        created: function () {
            this.action = "edit";
        }
    });
</script>

请查看我的代码。我只设置app.form = object一次，为什么有两个值被更改被观看？

首先，它从''更改为'20'，这正是我所期望的，但突然之间从20变为undefined。

（代码拍了我评论了ajax请求，并直接设置了值。）

刚刚发生了什么？

Answer 1

您要将变量设置为的值没有选项。无法同步选择对象以显示值，因此它将值恢复为undefined。

Vue.js只用一个请求观察了两次数据变换

1 个答案: