如何VueJS

連接的數據屬性基本上我有我的數據對象的一對夫婦的數據串，我想要的東西，是連接一個字符串，到其他。我希望用戶能夠看到最後一次服務器更新的日期。如何VueJS

  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

來源

2017-07-25 DMrFrost

你可以使用一個計算的屬性，因此它會自動調整時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。

來源

2017-07-25 00:40:51 Scopey

可以使用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鉤

來源

2017-07-25 00:37:05

回答

相關問題