在 Vue Js 中重新渲染組件內容

Question

我在 Vue Js 中制作了一個“閱讀更多”組件，當通過 props 傳遞的文本發生更改時，該組件不會重新渲染以顯示新內容。

這是組件的代碼：

Vue.component('readmore', {
    template: 
            `
            <span>
                {{ part1 }}<span v-if="leia.mais">...
                    <span class="text-info ml-2" style="cursor:pointer;" v-on:click="readMore"> Leia mais</span>
                </span><span v-if="!leia.mais">{{ part2 }}
                    <span class="text-info ml-2" style="cursor:pointer;" v-if="leia.menos"  v-on:click="readLess">Leia menos</span>
                </span>
            </span>
            `,
    data: function () {
        return {
            part1: '',
            part2: '',
            leia: {},
            defaultMaxChr: 200
        }
    },
    
    props: ['maxchr', 'text'],

    created: function () {
        var text = this.text;
        var maxchr = this.maxchr ? this.maxchr : this.defaultMaxChr;
        if ((undefined === text) || (0 === text.length)) {
            console.warn('COMPONENTE LEIA MAIS: Parâmetro text indefinido ou foi passada uma string vazia.');
            return;
        }

        if (text.length <= maxchr) {
            this.part1 = text;
            this.part2 = '';

            this.leia = {mais: false, menos: false};
        } else {
            this.part1 = text.substr(0, maxchr);
            this.part2 = text.substr(maxchr);

            this.leia = {mais: true, menos: false};
        }
    },
    methods: {
        readMore: function()
        {
            this.leia.mais = false;
            this.leia.menos = true;
        },

        readLess: function()
        {
            this.leia.mais = true;
            this.leia.menos = false;
        },

    },

});

如果我有下面的代碼並更改輸入，則不會發生任何事情。

<readmore> 和 <input> 位於另一個組件中，該組件在其 data 屬性中定義文本。

<input v-model="text">

<readmore
    v-bind:text="text"
    v-bind:maxchr="100"
></readmore>

Answer 1

那是因為你在created的 function 中執行你的邏輯，它只會在組件的初始加載時執行一次。 並且不會在text屬性更改時再次執行，您需要使用watch with immediate execution 來檢查文本的更改。

watch: {
  text: {
    handler() {
        var text = this.text;
        var maxchr = this.maxchr ? this.maxchr : this.defaultMaxChr;
        if ((undefined === text) || (0 === text.length)) {
            console.warn('COMPONENTE LEIA MAIS: Parâmetro text indefinido ou foi passada uma string vazia.');
            return;
        }

        if (text.length <= maxchr) {
            this.part1 = text;
            this.part2 = '';

            this.leia = {mais: false, menos: false};
        } else {
            this.part1 = text.substr(0, maxchr);
            this.part2 = text.substr(maxchr);

            this.leia = {mais: true, menos: false};
        }
    },
    immediate: true
  }
}