Как преобразовать или изменить значение цикла, который является массивом, в строку в динамическом списке в Vue.js

Question

Я пытаюсь преобразовать массив в специально отформатированную строку. Я не могу сделать это, потому что я рендеринг объекта динамически и цикл по нему:

<ul class = "details" v-for = "(value, propertyName) in items[this.index]" :key = "value.id">
    <li>{{value}}</li>
</ul>

Например, предположим, что отображаемые значения:

• ['Bob', 'Charlie', 'Annie']
• 'Richard'

Я хочу изменить массив и отобразить его как:

• 'Bob' 'Charlie' 'Annie'
• 'Richard'

Я уже пробовал {{values.join(" ")}}.

Answer 1

Вы можете условно использовать Array.prototype.join() на value в зависимости от того, является ли он Array.Тогда {{value.join(' ')}} должно работать так, как вы ожидаете:

<li v-if="Array.isArray(value)">{{value.join(' ')}}</li>
<li v-else>{{value}}</li>

new Vue({
  el: '#app',
  data: () => ({
    items: [
      {id: 1, names: ['Bob', 'Charlie', 'Annie']},
      {id: 2, names: 'Richard'},
    ],
    index: 0,
  }),
})

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <label>Index = 0
    <input type="radio" name="index" v-model="index" value="0">
  </label>
  <label>Index = 1
    <input type="radio" name="index" v-model="index" value="1">
  </label>
  
  <ul class = "details" v-for = "(value, propertyName) in items[this.index]" :key = "value.id">
    <li v-if="Array.isArray(value)">{{value.join(' ')}}</li>
    <li v-else>{{value}}</li>
  </ul>
</div>

Answer 2

Массив можно преобразовать в строку одним из следующих способов:

1- .toString ()

['a', 'b', 'c'].toString(); // 'a,b, c '

2- Привести к строке

['a', 'b', 'c'] + []; //' a, b, c '

['a', 'b', 'c'] + ''; //'a, b, c'

3- .join ()

['a', 'b', 'c'].join(); // 'a, b, c' (по умолчанию разделитель ','))

['a', 'b', 'c'].join(''); // 'abc'

['a', 'b', 'c'].join('-'); // 'ab-c'

4- JSON.stringify ()

JSON.stringify(['a', [1], 'b', 'c']); // '[' a ', [1],' b ',' c ']'

5- Вручную , если не можетеиспользовать встроенный метод ...

function arrayToString(arr) {
  let str = '';
  arr.forEach(function(i, index) {
    str += i;
    if (index != (arr.length - 1)) {
      str += ',';
    };
  });
  return str;
}