How to concatenate data properties in VueJS

Question

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

Scopey · Accepted Answer · 2017-07-25 00:40:51Z

2

You could use a computed property so it would automatically adjust when lastUpdate changes:

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

Then you can use it like you would as if it was in data, but you would have to change your event to update lastUpdate instead of message.

answered Jul 25, 2017 at 0:40

Scopey

6,3191 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muthu Kumaran · Accepted Answer · 2017-07-25 00:37:05Z

1

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

answered Jul 25, 2017 at 0:37

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

How to concatenate data properties in VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related