Exploring the capabilities of Vue.JS by creating components dynamically and composing them together.
Encountered an unusual issue where, even though data seems to be updating correctly, removing one of the boxes using splice() always results in the removal of the last item in the rendered HTML.
Take a look at this example fiddle. Testing was done on Chrome.
https://jsfiddle.net/afz6jjn0/
For reference, here's the Vue component code:
Vue.component('content-longtext', {
template: '#content-longtext',
props: {
model: { type: String, required: true },
update: { type: Function, required: true }
},
data() {
return {
inputData: this.model
}
},
methods: {
updateContent(event) {
this.update(event.target.value)
}
},
})
Vue.component('content-image', {
template: '#content-image',
})
Vue.component('content-list', {
template: '#content-list-template',
props: {
remove: { type: Function, required: true },
update: { type: Function, required: true },
views: { type: Array, required: true }
},
methods: {
removeContent(index) {
this.remove(index)
},
updateContent(index) {
return (content) => this.update(index, content)
},
},
})
Vue.component('content-editor', {
template: '#content-editor',
data() {
return {
views: [
{type: 'content-longtext', model: 'test1'},
{type: 'content-longtext', model: 'test2'},
{type: 'content-longtext', model: 'test3'},
{type: 'content-longtext', model: 'test4'},
{type: 'content-longtext', model: 'test5'},
],
}
},
methods: {
newContentBlock(type) {
this.views.push({type: 'content-longtext', model: ''})
},
updateContentBlock(index, model) {
this.views[index].model = model
},
removeContentBlock(index) {
this.views.splice(index, 1)
},
},
})
let app = new Vue({
el: '#app'
})