javascript - 如何在 VueJS 中连接数据属性

Question

基本上，我的数据对象中有几个数据字符串，我想要的是将其中一个字符串连接到另一个字符串中。我希望用户能够看到上次服务器更新的日期。

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

所以理想情况下它会显示“message + 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.