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

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

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

我有一个类似这样的对象数组(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));

扫码关注云+社区

领取腾讯云代金券