首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将对象字符串拆分成单独的字符串?VueJS和计算属性

如何将对象字符串拆分成单独的字符串?VueJS和计算属性
EN

Stack Overflow用户
提问于 2018-08-06 04:04:05
回答 2查看 1.3K关注 0票数 1

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

我的示例。

我希望这对我要说的话有意义。谢谢!

EN

回答 2

Stack Overflow用户

发布于 2018-08-06 04:35:40

下面是一个使用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));

票数 0
EN

Stack Overflow用户

发布于 2018-08-06 16:02:51

好吧,我想我只是评论一下,但我想我也可以做出回答。我认为你的代码几乎是正确的。您唯一的错误是在拆分数组之后再次加入数组。所以

('X,Y,Z ') .split(',‘) --> 'X','Y','Z'

基本上你应该停在这里。但是在你的代码中,你要做的就是将数组连接回一个字符串。

'X','Y','Z'.join(',') --> 'X,Y,Z'

只需保留连接并将计算对象中的行从

i['Geometry Extracted'].split(', ').join(', ')

i['Geometry Extracted'].split(', ')

你应该会很好

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51697834

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档