Основной список и список детей в Vue

-4

Я только что запустил vue.js и пытаюсь создать приложение, похожее на задачу. Разница лишь в том, что для каждого элемента списка у меня есть дочерний список. Основной список работает нормально, но дочерний список не работает. Я пытаюсь несколько часов, чтобы найти, что не так с моим кодом, но я не могу решить проблему. Может кто-нибудь сказать мне, что я делаю не так?

var app = new Vue({
el: "#app",
data: {
groups: []
},
methods: {
deleteGroup(group) {
const groupIndex = this.groups.indexOf(group);
this.groups.splice(groupIndex, 1);
},
createGroup() {
this.groups.push({
title: "",
listMode: 0,
properties: []
});
},
deleteProperty(group, property) {
const propertyIndex = properties.indexOf(group.properties, property);
group.properties.splice(propertyIndex, 1);
},
createProperty(group) {
group.properties.push({
name: "",
type: 0
});
}
}
});
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="app" style="margin: auto; width: 600px;">
<div
v-for="(group, index) in groups"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Group Name :</label>
<input class="form-control" v-model="group.title" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">List Mode :</label>
<select class="form-control" v-model="group.listMode">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<div style="padding-left: 50px;">
<div
v-for="(property, Index2) in group.properties"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Property Name :</label>
<input class="form-control" v-model="property.name" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Type :</label>
<select class="form-control" v-model="peroprty.type">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<!--
<button class='btn btn-success' v-on:click="deleteProperty(group, property)"><i class='trash icon'></i> Delete</button>
-->
</div>
<button class="btn btn-success" v-on:click="createProperty(group)">
Create Group
</button>
</div>
<button class="btn btn-success" v-on:click="deleteGroup(group)">
<i class="trash icon"></i> Delete
</button>
</div>
<button class="btn btn-success" v-on:click="createGroup()">
Create Group
</button>
</div>
</body>

спросил(а) 2021-01-19T17:03:38+03:00 2 месяца, 3 недели назад
1
Решение
87

У вас есть синтаксическая ошибка в вашей v-модели с именем "peroprty"

<select class="form-control" v-model="peroprty.type">

Попробуйте обновить до "собственности"

Obs: Вы всегда можете заглянуть в консоль/отладку Chrome, чтобы увидеть, какая может быть ошибка. Особенно при попытке сделать какое-либо событие с: v-for, v-if, @click и, среди прочего, attrs of vue

ответил(а) 2021-01-19T17:03:38+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема