Когда Array отображается как String на Vue 3, это может быть вызвано несколькими причинами. Один из таких случаев может быть связан с тем, что при попытке отрендерить массив в шаблоне Vue, Vue будет пытаться преобразовать его в строку, чтобы отобразить его в HTML.
Vue использует стандартный алгоритм преобразования объектов JavaScript в строки, который называется "ToPrimitive". Суть его заключается в том, что перед визуализацией объекта, Vue пытается вызвать у него методы toPrimitive или valueOf, чтобы получить примитивное значение, которое будет отображено в HTML.
Если в массиве имеются только примитивные значения, то Vue просто соединит их в строку и отобразит. Например, если у вас есть массив ["Hello", "World"], Vue просто преобразует его в строку "HelloWorld".
Однако, если в массиве содержатся объекты, то Vue попытается вызвать метод toPrimitive у каждого объекта. Это может привести к неожиданному результату, если метод toPrimitive не был правильно реализован. Если метод toPrimitive не возвращает примитивное значение, то Vue будет пытаться вызвать метод valueOf, а затем метод toString у объекта.
Возможная причина, почему массив отображается как строка, может быть связана с тем, что у ваших объектов в массиве не реализованы правильно методы toPrimitive, valueOf или toString. Если методы реализованы некорректно или возвращают непримитивное значение, то Vue будет использовать значение по умолчанию, которое и является строкой.
Чтобы решить эту проблему, вам следует убедиться, что объекты в массиве правильно реализуют методы toPrimitive, valueOf и toString. Метод toPrimitive должен вернуть примитивное значение (такое как число, строку или булево значение), а метод valueOf и toString должны возвращать соответствующие примитивные значения объекта.
Например, у вас есть объекты в массиве, которые имеют свойство value и вам нужно отобразить сумму этих значений. Вы можете реализовать метод toPrimitive следующим образом:
{
value: 10,
toPrimitive: function(hint) {
if (hint === 'number') {
return this.value;
}
return String(this.value);
}
}
Таким образом, Vue будет использовать правильное примитивное значение объекта при его отображении.
В общем случае, чтобы избежать неясного преобразования массива в строку, вам следует внимательно проверить свою реализацию методов toPrimitive, valueOf и toString для объектов, которые находятся в массиве, и убедиться, что они возвращают правильные примитивные значения.