Question

我一直拉着我的头发试图看看为什么这不起作用，因为我想如果我在Vue实例中修改了一个属性，双向数据绑定接管并将自动更新图。

我有一个Laravel Reply模型，可以在其body属性中接受降价文字。然后，我使用Laravel访问器将此body属性转换为原始HTML：

Reply.php

/**
 * The accessors to append to the model's array form.
 *
 * @var array
 */
protected $appends = [
    'parsed_body',
];

/**
 * Returns the ticket description parsed from markdown.
 *
 * @return string
 */
public function getParsedBodyAttribute()
{
    return Markdown::convertToHtml($this->body);
}

然后我有一个回复组件，它接受属性中的所有Reply属性：

Reply.vue：

<script>
    export default {
        props: ['attributes'],

        data() {
            return {
                editing: false,
                body: this.attributes.body,
                parsed_body: this.attributes.parsed_body
            };
        },

        methods: {
            update(url) {
                axios.post(url, {
                    _method: 'patch',
                    body: this.body
                }).then(response => function () {
                    this.body = response.body;
                    this.parsed_body = response.parsed_body;
                });

                this.editing = false;
            },

            destroy() {
                axios.delete('/replies/' + this.attributes.id);

                $(this.$el).fadeOut(300, () => {
                    flash('Your reply has been deleted.');
                });
            }
        },

        computed: {
            parsed: function () {
                return this.parsed_body;
            }
        }
    }
</script>

我的观点：

<ticket-reply :attributes="{{ $reply }}" inline-template v-cloak>
    <div class="reply-markdown-body" v-if="editing">

        <div class="form-group">
            <textarea name="body" rows="6" class="form-control" required v-model="body"></textarea>
        </div>

        <div class="form-group">
            <button
                class="btn btn-info"
                @click="update('{{ route('tickets.replies.update', [$ticket->id, $reply->id]) }}')">
                Save
            </button>
            <button class="btn btn-default" @click="editing = false">Cancel</button>
        </div>

    </div>

    <div class="reply-body" v-else v-html="parsed_body"></div>
</ticket-reply>

我的控制器（更新回复后）：

if ($request->expectsJson()) return response($reply);

当我调用更新方法时，编辑输入的主体已成功更新，我可以看到我在textarea中添加的文字，但是在不编辑时，parsed_body属性不是＆＃39; t更新了，即使我在更新方法中设置属性？

当我刷新页面时，我会获得所有正确的更新内容，但它不会像应该的那样动态更新？

一切都像它应该的那样。成功完成更新后，编辑表单将消失（表示已成功更新属性this.editing），然后使用this.body绑定更新v-model属性，但不 v-html属性??

有谁知道这里发生了什么？

Answer 1

看起来this是您的问题：您在this中的（非箭头）function内引用了then。您的意思是在那里设置function关键字吗？

   methods: {
        update(url) {
            axios.post(url, {
                _method: 'patch',
                body: this.body
            }).then(response => function () {
                this.body = response.body;
                this.parsed_body = response.parsed_body;
            });

            this.editing = false;
        },

v-html属性没有更新

1 个答案: