如何VueJS

Question

连接的数据属性基本上我有我的数据对象的一对夫妇的数据串，我想要的东西，是连接一个字符串，到其他。我希望用户能够看到最后一次服务器更新的日期。

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

那么理想，将显示“信息+ LASTUPDATE” 我也一起不能只是字符串以HTML，因为我需要能够换出的消息为其他字符串。我可以在html中分离出我的消息，但是我想知道是否有更动态的方法来做到这一点。

付诸我的代码的情况下，我们有以下父组元：

<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> 

我很想能够做的就是添加类似下面的我的数据表

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

Answer 1

你可以使用一个计算的属性，因此它会自动调整时lastUpdate变化：

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 
     } 
    } 
} 

然后，你可以像你将仿佛用它，它在data，但你必须改变你的事件来更新lastUpdate而不是message。

Answer 2

可以使用created钩更新data财产

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 
    } 
    } 

或者你也可以使用mounted挂钩，而不是created钩