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屬性不更新

回答

相關問題