v-html属性不更新

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

我有一个Laravel Reply模式，即接受降价的文字转化成其body属性。

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小号属性到属性的答复组件：

回复我，然后使用Laravel访问转换这个body属性为原始HTML .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绑定，但不是v-html属性??

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

来源

2017-05-05 Steve Bauman

看起来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; 
     },

来源

2017-05-05 21:32:31

不幸的是，使用普通函数（非es6）也不起作用。 –

看看你的代码：你正在使用箭头函数来返回一个非箭头函数。 –

是的，我明白了，我在发布并指定了Vue实例的一个局部变量以在axios'then（）'promise中使用它之后解决了这个问题，但仍然无法解决问题。你可以用jsbin或类似的东西来测试你自己，v-html指令似乎没有任何双向绑定。 –

v-html属性不更新

回答

相关问题