У меня есть массив и форма. При клике на кнопку создания внутри родительского компонента и на кнопку редактирования внутри компонента со списком, у меня динамически должна появляться форма. Логика такая, если хочу добавить новое имя, id
соответственно равняется null
, если id !== null
, то поле редактируется. Как "скормить" моей форме элемент массива, чтобы уже исходя из данных, что id = null
или id !==null
, я мог отображать форму с нужным лейблом?
Vue.config.productionTip = false
Vue.config.devtools = false
const MyForm = {
template: `<form v-if="nameIsCreate || nameIsEdit">
<input id="form"
type="text"
:value="name"
@input="$emit('input', $event)"
@keyup.enter="save()"
/>
<label for="form" v-if="nameIsCreate">создать имя</label>
<label v-if="nameIsEdit" for="form">изменить имя</label>
</form>`,
name: 'my-form',
model: {
prop: "name"
},
props: ['nameIsCreate', 'nameIsEdit'],
methods: {
save: function() {
this.$emit("save");
}
}
};
const MyList = {
template: `
<div>
<span>{{personName.name}}</span>
<button @click="nameEdited()">edit</button>
</div>`,
name: 'my-list',
props: {
personName: {
type: Object,
}
},
methods: {
nameEdited: function(id) {
this.$emit('nameEdited', id)
},
}
};
const App = {
template: `
<div>
<button @click="createFormOpened()">create</button>
<my-form
@save="saveName"
v-model="name"
:nameIsEdit="nameIsEdit"
:nameIsCreate="nameIsCreate"
/>
<my-list
v-for="personName in persons"
:key="personName.id"
:personName="personName"
@nameEdited="editFormOpened()"
/>
</div>
`,
components: {
'my-form': MyForm,
'my-list': MyList
},
data() {
return {
nameIsEdit: false,
nameIsCreate: false,
name: '',
person: {
id: null,
name: ''
},
persons: [{
id: 0,
name: 'Ivan'
}, {
id: 1,
name: 'Alex'
}, {
id: 2,
name: 'John'
}, ]
}
},
methods: {
saveName() {
if (this.persons.id === null) {
this.person = {
name: ''
}
this.persons.push(this.person)
} else {
this.persons = this.persons.find(item => item.id === id)
let index = this.persons.findIndex(item => item.id === person.id)
this.persons.splice(index, 1, person)
}
},
editFormOpened() {
this.name = '';
this.nameIsCreatenameIsEdit = false;
this.nameIsEdit = !this.nameIsEdit;
},
createFormOpened: function() {
this.name = '';
this.nameIsEdit = false;
this.nameIsCreate = !this.nameIsCreate;
},
}};
new Vue({
el: '#app',
components: {
App
},
template: `<app></app>`
})
<div id="app" v-cloak></div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10'></script>
div#app
) - перед тем как решать задачу передачи массива, стоит сначала исправить их.props
забиндить дочернему компоненту из родительского, и индекс элемента тоже).nameIsCreate
иnameIsEdit
и выводить лейбл уже относительно айдишника. Передавал через props..Возможно внутри компонента дочернего, куда прокинул объект (массив, действительно, целиком прокидывать нет смысла), просто неправильно обращаюсь к свойству, но и ошибок нет, и выводит 2 лейбла одновременно