v-html 属性不更新

Question

我一直在努力寻找为什么这不起作用，因为我认为如果我修改了 Vue 实例中的属性，双向数据绑定将接管并在视图中自动更新。

我有一个 Laravel Reply 模型，它接受 markdown 文本到它的 body 属性中。然后我使用 Laravel 访问器将此 body 属性转换为原始 HTML：

回复.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);
}

然后我有一个回复组件，它将所有Replys 属性接受到一个属性中：

回复.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);

当我调用 update 方法时，编辑输入的正文已成功更新，我可以在 textarea 中看到我添加的文本，但是在不编辑时，parsed_body 属性没有更新，即使我'在更新方法中设置属性？

当我刷新页面时，我得到了所有正确的更新内容，但它没有像应有的那样动态更新？

一切正常。更新成功后，编辑表单消失（说明this.editing属性更新成功），然后this.body属性更新为v-model绑定，但不是@ 987654333@属性？？

有人知道这里发生了什么吗？

Answer 1

看起来this 是您的问题：您在then 中的（非箭头）function 中指的是this。您的意思是在其中包含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;
        },