如何将对象字符串拆分为单个字符串?VueJS与计算性质

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (1063)

我有一个类似这样的对象数组(200+对象!):

[
    {
      Name: 'Aerial Farm',
      'Geometry Extracted': 'P, S'
    },
    {
      Name: 'Aircraft Hangar',
      'Geometry Extracted': 'P, C, S'
    }
]

我需要循环遍历对象,并拆分Geometry Extracted属性以设置为单个元素,如“P”和“S”,而不是单个字符串“P,S”。

我尝试将此作为VueJS中的计算属性:

computed: {
 geoList() {
   return this.items.map(i =>
     i['Geometry Extracted'].split(', ').join(', ')
   );
 }
}

然后在我的模板中循环如下:

    <ul>
        <li v-for='item in geoList' :key='item.id'>
          <a href='#'>{{item}}</a>
        </li>
    </ul>

但是,HTML的呈现方式如下:

...
<li>
    P, S
</li>
...

我的目标是实现这样的目标:

<li>
    <a href="#">P</a>
</li>
<li>
    <a href="#">S</a>
</li>

示例:https://pastebin.com/ubdZ4HmV

提问于
用户回答回答于

下面是一个示例,可以使用Javascript创建包含这些字符的HTML元素。编辑这些函数以满足你的特定需求。

var dummyObject = [{
    Name: 'Aerial Farm',
    'Geometry Extracted': 'P, S'
  },
  {
    Name: 'Aircraft Hangar',
    'Geometry Extracted': 'P, C, S'
  },
  {
    Name: ' Farm',
    'Geometry Extracted': 'P, S'
  },
  {
    Name: 'Aircraft ',
    'Geometry Extracted': 'X, X, X'
  },
  {
    Name: 'Aerial Google Farm',
    'Geometry Extracted': 'P, D'
  },
  {
    Name: 'Blue Hangar',
    'Geometry Extracted': 'P, C, S, N'
  },
]

function getGeometry(myObject) {
  return myObject['Geometry Extracted'].split(', ');
}

function createClasses(myArray) {
  myString = '';
  myArray.forEach(function(element) {
    myString += "<li><a href=\"#\">" + element + "</a></li>";
  })
  return myString;
}

function loopObjects(objectArray) {
  myString = '';
  objectArray.forEach(function(element) {
    myString += createClasses(getGeometry(element));
  })
  return myString;
}

console.log(loopObjects(dummyObject));

热门问答

关于文字鉴别的违法的问题?

ritchiechen

腾讯 · 后台开发工程师 (已认证)

推荐

请使用 `try catch` 捕获异常,查看堆栈信息

在服务器启动的项目,怎么才能关掉控制台,项目不会自动也关闭?

推荐
比较常用的有两种方式 1. 把程序添加到Linux的后台服务中,详见https://blog.csdn.net/zj15527620802/article/details/90056946 2. 将应用程序放在某容器中启动,如nohup等,详见https://blog.csdn....... 展开详请

怎么实现存储桶设置私有读写的时候,可以直接访问图片,和复制临时链接一直的功能?

幻象丛林RESTful 服务开发者
推荐
临时链接是携带了签名参数,在后台复制时是自动算好的,可以在签名有效期内临时访问对象。 如果需要自己实现的话可以调用GET Object接口,携带Authorization签名。 GET /<ObjectKey> HTTP/1.1 Host: <BucketName-APPID>....... 展开详请

调用人脸变化接口,为什么一直错误?

zqfan

腾讯 · 高级工程师 (已认证)

推荐

请尽量使用SDK吧,能够有效避免签名错误。

这个签名错误一般是由于timestamp参数取值和标准时间相差过大引起的,常见的是客户端本地时间没有和互联网时间同步,此外timestamp要求是到秒,而不是毫秒。请阅读API文档里调用方式相关的文档。

为什么服务器经常掉线,我进控制台看是运行的状态,但就是访问不了网站,ssh也登录不了,重启后才行?

我是预言家你有freestyle么
推荐
经常掉线可能是因为长时间不操作,闲置时间过长所以服务器自动断开连接 解决此问题的方法: 方法一: vi /etc/ssh/sshd_config配置文件,修改ClientAliveCountMax(单位为分钟)为想要的值! 修改完成并保存后,执行命令:service sshd r...... 展开详请

腾讯会议,电脑版,召开会议提示发生异常(错误码:-161)),是什么问题?

推荐已采纳
-161是媒体服务器连接超时,造成该问题的原因可能有: 1. 网络异常 2. 开启了V** 3. 网络有防火墙或上网策略控制 4. 安装风行加速器进行LSP劫持 可以按照上述信息排查一下。... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券