DMrFrost DMrFrost - 3 years ago 188
Javascript Question

How to concatenate data properties in VueJS

Basically I have a couple data strings in my data object, what I want, is to concatenate one the the strings, into the other. I want the user to be able to see the date of the last server update.

lastUpdate: "10/30/3033",
message: 'Servers last updated: ',


So ideally it would display "message + lastUpdate"
Also I cant just string it together in HTMl because I need to be able to swap out the message for other strings. I could seperate out my messages in html, but i want to learn if there is a more dynamic way to do this.

Putting it into the context of my code we have the following parent componenet:

<template>
<div id="main-container" class="col-sm-12">
<h1>Server Display</h1>
<p>{{message}}</p>
<div id="mini-container" class="col-sm-3" v-for="(server, index) in servers">
<h3>({{index+1}}): {{server}}</h3>
<mi-single-server :servers="servers"
@serversReset="message = $event"></mi-single-server>
</div>
</div>
</template>

<script type="text/javascript">
import SingleServer from './SingleServer.vue';

export default{
data: function(){
return{
lastUpdate: "10/30/3033",
servers: ['Blue', 'Aphex', 'Maxamillion', 'T180', 'T190', 'NW0'],
message: 'Servers last updated: '
};
},
components: {
'mi-single-server': SingleServer
}
}
</script>


What I would love to be able to do is to add something like the following to my data table

message: 'Servers last updated: ' + this.lastUpdate

Answer Source

You can update data property using created hook

export default{
    data: function(){
        return{
            lastUpdate: "10/30/3033",
            servers: ['Blue', 'Aphex', 'Maxamillion', 'T180', 'T190', 'NW0'],
            message: 'Servers last updated: '
        };
      },
     components: {
        'mi-single-server': SingleServer
     },
     created: function(){
        this.message = 'Servers last updated: ' + this.lastUpdate
     }
   }

Or you can also use mounted hook instead of created hook

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download