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触发了change事件。然后你已经在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")
      });

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

1 个答案: