Javascript 渲染Laravel刀片局部视图时编译Vue.js组件

我在Vue.js中有一个简单的组件，用于局部视图-question.blade.php：

{{--HTML code--}}

<my-component type='question'>
    <div class="question">[Very long text content...]</div>
</my-component>

{{--more HTML code--}}

{{--HTML代码--}
[非常长的文本内容…]
{{--更多HTML代码--}

该组件背后的思想是围绕问题内容创建一个“显示更多-显示更少”的逻辑

该组件被编译并在页面加载时呈现良好。但是，在某些情况下，我需要通过Ajax动态加载问题。为此，我进行了一个简单的jQuery Ajax调用，检索question.blade.php的HTML并将其附加到DOM中。问题是，组件未编译

如何确保在呈现部分视图时始终编译组件，而不管它是在页面加载时发生还是通过Ajax调用发生？

完整组件代码：

{%verbatim%}
…{{$t（'show_more'）}
{{$t（'show_less'）}
/*风格*/
导出默认值{
道具：['content'，'type']，
数据（）{
返回{
activateShowMore:false，
伊肖恩：错，
cssClasses:this.getCssClasses（）
}
},
地区：{
嗯:{
‘show_more’：‘show more’，
“少显示”：“少显示”
},
de:{
“展示更多”：mehr Anzigen，
“少展示”：“weniger Anzigen”
}
},
安装的（）{
这个。checkShowMore（）；
},
观察：{
isShown：函数（应显示）{
this.cssClasses=this.getCssClasses（应显示）；
}
},
方法：{
checkShowMore:function（）{
设$element=$（this.$el）；
让visibleHeight=$element.outerHeight（）；
让realHeight=$element.find（'.text area read'）.first（）.outerHeight（）；
设maxHeight=this.getMaxHeight（）；
this.activateShowMore=（visibleHeight==maxHeight）和&（visibleHeight

我不认为这是最好的方法，但它应该起作用。但是我以前必须处理vue和jquery通信

我所做的是创建一个隐藏输入，在ajax调用完成后使用jquery更改值，然后使用jquery触发更改事件。然后，您已经在vue中收听了事件，您将知道需要更新内容。这将使您能够对vue组件进行一些修改，并且应该能够进行更新。如果需要将内容发送到vue，则可能需要在输入隐藏值中发送内容。我做了一个快速的演示代码来解释我的意思。这是我的建议

---

php是针对服务器的，是否尝试使用htmlis作为vue组件，取决于ajax调用的结果？如果是的话！那么您是如何将这些数据发送到vue的。@zeidanbm组件背后的思想是围绕问题文本创建一个“显示更多-显示更少”的逻辑。因此，每次我调用Ajax检索问题时，我都需要“show more”组件处理其文本内容。因此，您几乎需要在DOM中通知您的组件更新。我宁愿将所有逻辑拉入vue，并在其中执行http请求。但是您可以在这里使用事件。你能发布你的vue组件代码吗？@zeidanbm更新了帖子。问题是，我正在处理一个遗留代码库，检索问题的Ajax调用是通过另一个脚本中的jQuery完成的。“显示更多”Vue.js组件是新的。感谢您的努力。我一直在考虑类似的解决方案。我最终肯定会做这样的事情。

{% 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>

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")
      });