Не рендерится вложенный массив в Vue.js?

Question

[Александр Соловей]

В данных вложенный массив объектов ( "next_steps") не рендерится.
Код Javascript:

const questsApp = Vue.createApp({
    data() {
        return {
            scenesList: [],
            currentScene: [
                {
                    "ID": "1",
                    "category_id": "1",
                    "card_title": "Добро пожаловать в квест",
                    "card_body": "Добро пожаловать в квест. Если захочешь выйти из квеста скажи прощай.Ты готов?",
                    "choises": "Ты готов окунуться в атмосферу эпической саги?",
                    "next_steps": "[{"id":1,"answer":"готов", "next_step":17},{"id":2,"answer":"не готов", "next_step":0},{"id":3, "answer": "да", "next_step":17}, {"id":4,"answer":"нет","next_step":0}]",
                    "account": "0",
                    "reputation": "0"
                }
            ]
        }
    }
})

Код HTML:

<div class="modal-body">
                <div class="row align-items-md-stretch">
                    <div class="col-md-6 pt-3">
                        <div class="h-100 p-5 bg-light border rounded-3">
                            <label for="inputRequest" class="form-label">Scene title</label>
                            <input type="text" class="form-control" id="inputTitle" placeholder="Title of scene" v-bind:value="currentScene[0].card_title">
                            <div class="pt-3">
                                <label for="inputAnswer" class="form-label">Card body</label>
                                <textarea class="form-control" id="inputBody" rows="9">{{currentScene[0].card_body}}</textarea>
                            </div>
                            <div class="pt-3">
                                <label for="inputAnswer" class="form-label">Choises</label>
                                <textarea class="form-control" id="inputChoises" rows="4">{{currentScene[0].choises}}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 pt-3">
                        <div class="h-100 p-4 text-white bg-dark rounded-3">
                            <h5>Next steps</h5>
                            <button id="newInputAnswer" class="btn btn-outline-light" type="button" v-on:click="handleInput">Добавить</button>
                            <div id="inputContainer" class="mt-3">
                                <ul v-for="step in currentScene[0].next_steps" >
                                   <li> <label>{{ step.id }}</label>
                                    <p>{{step.answer}}</p>
                                   </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

[Ба Ань Доан]

next_steps заведена как строка, нужно сначала спарсить его в массив.

JSON.parse(currentScene[0].next_steps)

Comments

[Александр Соловей]

я новичок в Vue.js . Думал Vue автоматом распарсит.
Подскажите, как после JSON.parse(item.next_steps) вернуть эти данные на рендер?

[Ба Ань Доан]

смотря как эти данные попадают в currentScene, лучше на этом моменте парсить, чтобы были уже нормализованные данные

[Александр Соловей]

Ба Ань Доан, Спасибо. понял, что это не вложенный массив, а строка.

[Ба Ань Доан]

Александр Соловей, по возможности, конечно, лучше сделать так, чтобы бэк отдавал сразу нормальные данные