コンパイルVue.jsコンポーネントLaravelブレード部分図

Question

をレンダリングしながら、私は部分図で使用されているVue.jsで単純なコンポーネントを持っています質問コンテンツの周りに「より多くの情報を表示する」ロジックを作成することです。

コンポーネントがコンパイルされ、ページの読み込みに問題はありません。しかし、質問をAjax経由で動的にロードする必要がある場合があります。このために、単純なjQuery Ajax呼び出しを行い、question.blade.phpのHTMLを取得してDOMに追加します。問題は、コンポーネントがコンパイルされていないです。

ページロード時に発生するかAjaxコールで発生するかにかかわらず、パーシャルビューがレンダリングされるときにコンポーネントが常にコンパイルされるようにするにはどうすればよいですか？

全コンポーネントコード：

{% verbatim %} 
<template> 
    <div> 
     <div v-bind:class="cssClasses" v-html="content"></div> 

     <div v-if="activateShowMore && !isShown" class="sml-button closed" v-on:click="toggleButton()"> 
      <span class="sml-ellipsis">...</span><span class="sml-label">{{$t('show_more')}}</span> 
     </div> 
     <div v-if="activateShowMore && isShown" class="sml-button open" v-on:click="toggleButton()"> 
      <span class="sml-label">{{$t('show_less')}}</span> 
     </div> 
    </div> 
</template> 

<style lang="sass" scoped> 
    /*styles*/ 
</style> 

<script type="text/babel"> 
    export default { 
     props: ['content', 'type'], 

     data() { 
      return { 
       activateShowMore: false, 
       isShown: false, 
       cssClasses: this.getCssClasses() 
      } 
     }, 

     locales: { 
      en: { 
       'show_more': 'show more', 
       'show_less': 'show less' 
      }, 
      de: { 
       'show_more': 'mehr anzeigen', 
       'show_less': 'weniger anzeigen' 
      } 
     }, 

     mounted() { 
      this.checkShowMore(); 
     }, 

     watch: { 
      isShown: function(shouldBeShown) { 
       this.cssClasses = this.getCssClasses(shouldBeShown); 
      } 
     }, 

     methods: { 
      checkShowMore: function() { 
       let $element = $(this.$el); 
       let visibleHeight = $element.outerHeight(); 
       let realHeight = $element.find('.text-area-read').first().outerHeight(); 
       let maxHeight = this.getMaxHeight(); 

       this.activateShowMore = (visibleHeight === maxHeight) && (visibleHeight < realHeight); 
      }, 
      getMaxHeight: function() { 
       switch (this.type) { 
        case 'question': 
         return 105; 
        case 'answer': 
         return 64; 
       } 
      }, 
      toggleButton: function() { 
       this.isShown = !this.isShown; 
      }, 
      getCssClasses: function(shouldBeShown) { 
       if (undefined === shouldBeShown || !shouldBeShown) { 
        return 'sml-container' + ' sml-' + this.type + ' sml-max-height'; 
       } 

       return 'sml-container' + ' sml-' + this.type; 
      } 
     } 
    } 
</script> 

Answer 1

私はこれが最善の方法だとは思わないが、それはトリックを行う必要があります。しかし、私は前にvueとjqueryコミュニケーションに対処しなければなりませんでした。

私が行ったことは、隠された入力を作成し、ajax呼び出しが終了した後にjqueryで値を変更し、jqueryで変更イベントをトリガしました。その後、すでにvue内のイベントを聴いていると、コンテンツを更新する必要があることがわかります。これにより、あなたのvueコンポーネントの変更が行われ、更新できるはずです。 vueにコンテンツを送信する必要がある場合は、それを入力隠し値で送信する必要があります。私は何を意味するのかを説明するための簡単なデモコードを出しました。ここにはlinkがあります。

var app = new Vue({ 
      el: '#app', 
      data(){ 
      return{ 
       content: 'hi there', 
      } 
      }, 
      methods: { 
      onChangeHandler: function(e){ 
       this.content = e.target.value 
      } 
      }, 
     }); 

     $('#me').on('click',function(){ 
     $('#update').val('Good Day!') 
     $('#update').trigger("click") 
     });