Как разбить строки объекта на отдельные строки? VueJS и компьютерная собственность

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>

Мой примерный код здесь.

Надеюсь, это имеет смысл для того, что я пытаюсь сказать. Спасибо!

  • 3
    почему вы присоединяетесь к массиву после его разделения? Если я правильно понимаю, вам просто нужно заменить i ['Geometry Extracted']. Split (',') .join (',') на i ['Geometry Extracted']. Split (',').
  • 0
    :key="item.id" всегда будет неопределенным, кстати. Элементы массива, возвращаемые geoList являются строками.
Теги:
vuejs2

2 ответа

0

Хорошо, я думал, что просто комментирую, но я думаю, я тоже смогу ответить. Я думаю, что вы код почти прав. Вы только ошибка в том, что вы снова присоединяетесь к массиву после его разделения. Так

('X, Y, Z'). Split (',') → ['X', 'Y', 'Z']

В принципе, вы должны остановиться здесь. Но что вы делаете в своем коде, вы присоединяете массив к строке.

['X', 'Y', 'Z']. Join (',') → 'X, Y, Z'

Просто оставьте соединение и исправьте строку в вычисленном объекте из

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

в

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

и вы должны быть в порядке

0

Вот пример того, как вы можете создавать HTML-элементы, содержащие эти символы с Javascript. Отредактируйте функции в соответствии с вашими конкретными потребностями.

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
    Я не думаю, что вы поняли его вопрос. ему нужно разделить строку
  • 0
    @ief.melone вы прочитали полный код, который я разместил? function getGeometry (myObject) {return myObject ['Geometry Extracted']. split (','); }
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню