Question

我遇到了一个非常奇怪的问题。一切似乎工作正常，但提交输入（当我使用<form/>元素时我尝试了表单提交事件和keyop.enter事件我在我的JS控制台中得到以下错误，无法解决它进行。

控制台错误如下：

Uncaught TypeError: Cannot read property '$forContext' of null
Watcher.set @ bundle.js:12831
(anonymous function) @ bundle.js:17611
Directive._withLock @ bundle.js:17628
Directive.set @ bundle.js:17610
listener.rawListener @ bundle.js:13664
n.event.dispatch @ jquery.js:4435
r.handle @ jquery.js:4121
remove @ bundle.js:10835
(anonymous function) @ bundle.js:10687applyTransition @ bundle.js:10715
removeWithTransition @ bundle.js:10686
singleRemove @ bundle.js:14172
remove @ bundle.js:14374
update @ bundle.js:14359
_update @ bundle.js:17482
Watcher.run @ bundle.js:12933
runBatcherQueue @ bundle.js:12666
flushBatcherQueue @ bundle.js:12642
nextTickHandler @ bundle.js:10079

我的组件代码：

module.exports = {
    data: function () {
        return {
            message: "",
            disabled: true,
            progress: 1,
            statusMessage: {},
            displayPhotoForm: false,
            displayVideoForm: false,
            videoUrl: ""
        }
    },
    computed: {
        messageLength: function() {
            if (this.message === "") {
                return 0;
            }
            return this.message.length;
        }
    },
    props: [
        'api-endpoint'
    ],
    methods: {
        advance: function() {
            if (this.progress == 1) {
                this.postStatus();
            }
            if (this.progress == 2 && this.videoUrl !== "") {
                this.putVideoUrl();
            }
            this.progress++;
        },
        postStatus: function () {
            this.$http.post(this.apiEndpoint, {message: this.message}, function (data, status, request) {
                this.message = '';
                this.statusMessage = data.data;
            }).error(function (data, status, request) {
                //
            });
        },
        putVideoUrl: function() {
            this.$http.put(this.apiEndpoint+'/'+this.statusMessage.id, {videoUrl: this.videoUrl}, function (data, status, request) {
                this.statusMessage = data.data;
            }).error(function (data, status, request) {
                //
            });
        }
    }
};

我的组件标记：

<status-message-form api-endpoint="{{ route('api.v1:statusMessages.store') }}" inline-template>
    <div class="row status-message-form p-y-2">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 text-xs-center">
                    <h5>What's new with your business?</h5>
                    <div class="form">
                        <fieldset class="form-group" v-if="progress == 1">
                            <input @keydown.enter="advance" class="form-control" type="text" v-model="message" />
                        </fieldset>
                        <fieldset class="form-group" v-if="progress == 2">
                            <button @click="displayPhotoForm=true" class="btn btn-secondary">upload photo</button>
                            <button @click="displayVideoForm=true" class="btn btn-secondary">add video</button>
                        </fieldset>
                        <fieldset class="form-group" v-if="progress == 2 && displayVideoForm">
                            <input @keydown.enter="advance" class="form-control" type="text" v-model="videoUrl" placeholder="https://youtube.com/?v=xyz123"/>
                        </fieldset>
                        <fieldset class="form-group" v-if="progress == 2 && displayPhotoForm">
                            <h6>photo uploader?</h6>
                        </fieldset>
                        <fieldset class="form-group" v-if="progress == 3">
                            step 3
                        </fieldset>
                    </div>
                    <div class="character-count" v-if="progress == 1">
                        @{{ 150 - messageLength }} Characters Remaining
                    </div>
                    <progress class="progress" value="@{{ progress }}" max="3">
                        PROGRESS - @{{ progress }}
                    </progress>
                    <pre>@{{ statusMessage | json }}</pre>
                </div>
            </div>
        </div>
    </div>
</status-message-form>

Answer 1

最后我找到了问题并解决了问题。这与jQuery或Vue无关。这是一个代码错误。当有人点击回车键时，<input>会更新其模态，所有事情都很开心。但是在下一个刻度中发送并到达事件类型“输入”。那时，由于<input>指令，v-if已经消失。因此没有范围，并且发生错误。

要解决此问题，只需使用v-show代替v-if即可保留<input>代码。

Answer 2

今天我遇到了这个问题，@ holmescn的答案非常有意义。你也可以添加＆＃34; lazy＆＃34;属性因此模型不会更新，直到＆＃34;更改＆＃34;事件是从输入中触发的。

<input type="text" v-model="whatever" v-if="whateverAndEver" lazy />

vue.js - 未捕获的TypeError：无法读取属性＆＃39; $ forContext＆＃39;为null

2 个答案: