I specify in the input "1" - the data is displayed. I specify "first" or others - nothing is displayed, but should be displayed. How to fix?

new Vue({ el: ".app", data: { names: { first: 'Boris', second: 'Alex', third: 'Mary', 1: 'Leslie' }, message: "" }, computed: { translated() { return this.message.split('').map(item => { return this.names[item] || ''; }).join(''); } } }) 
 p { margin: 50px; padding: 5px; background: #ccc; height: 75px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="app"> <input type="text" v-model="message" /> <p id="text">Текст : {{ message }}</p> <p>{{ translated }}</p> </div>

    1 answer 1

    Make a simple refund, or there may be several?

     new Vue({ el: ".app", data: { names: { first: 'Boris', second: 'Alex', third: 'Mary', 1: 'Leslie' }, message: "" }, computed: { translated() { return this.names[this.message]; //return this.message.split('').map(item => { // return this.names[item] || ''; //}).join(''); } } }) 
     p { margin: 0 50px; padding: 5px; background: #ccc; //height: 75px; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="app"> <input type="text" v-model="message" /> <p id="text">Текст : {{ message }}</p> <p>{{ translated }}</p> </div>