渲染 Laravel Blade 局部视图时编译 Vue.js 组件

Question

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

{{--HTML code--}}

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

{{--more HTML code--}}

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

组件已编译并在页面加载时呈现良好。但是，在某些情况下，我需要通过 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")
      });