Vuejs 组件不会立即渲染

Posted 2023-02-22

【中文标题】Vuejs 组件不会立即渲染

【英文标题】：Vuejs component does not render immediately

【发布时间】：2018-06-27 23:01:02

【问题描述】：

我有一个 vue 应用和一个组件。该应用程序只需输入并更改下面显示的名称，当有人更改名称时，以前的名称将保存在一个数组中。我有一个自定义组件来显示不同的列表项。但是，组件列表项不会立即呈现。相反，只要我在输入中键入一个字母，组件 otems 就会呈现。是什么赋予了？为什么这不会立即呈现列表项？

(function()
var app = new Vue(
    el: '#app',
    components: ['name-list-item'],
    data: 
        input: '',
        person: undefined,
        previousNames: ['Ian Smith', 'Adam Smith', 'Felicia Jones']
    ,
    computed: 
        politePerson: function()
            if(!this.person) 
                return 'Input name here';
            
            return "Hello! To The Venerable " + this.person +", Esq."
        
    ,
    methods: 
        saveInput: function(event)
            event.preventDefault();
            if(this.person && this.previousNames.indexOf(this.person) === -1) 
                this.previousNames.push(this.person);
            
            this.setPerson(this.input);
            this.clearInput();
        ,
        returnKey: function(key) 
            return (key + 1) + ". ";
        ,
        clearInput: function() 
            this.input = '';
        ,
        setPerson: function(person) 
            this.person = person;
        
    
);

Vue.component('name-list-item', 
    props: ['theKey', 'theValue'],
    template: '<span>theKey theValue</span>'
);
)()

这是我的 html。

<div id="app">
        <div class="panel-one">
            <span>Enter your name:</span>
            <form  v-on:submit="saveInput">
                <input v-model="input"/>
                <button @click="saveInput">Save</button>
            </form>
            <h1>politePerson</h1>
        </div>
        <div class="panel-two">
            <h3>Previous Names</h3>
            <div>
                <div v-for="person, key in previousNames" @click='setPerson(person)'><name-list-item v-bind:the-key="key" v-bind:the-value="person" /></div>
            </div>
        </div>
</div>

【参考方案1】：

在实例化 Vue 之后才定义组件，因此在第一次更新之前它不会应用组件。

【讨论】：

哇，原来这么简单。谢谢！