Question

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

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

理想情况下，它会显示＆＃34; message + lastUpdate＆＃34; 此外，我不能在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

您可以使用data hook

更新created属性

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

如何在VueJS中连接数据属性

2 个答案: