My application comprises of:
A component called
<consl :output="output" @submit-to-vue><consl>
that includes an input triggering a submit() method when the enter key is pressed.
<div>
<output v-html="output"></output>
<div id="input-line" class="input-line">
<div class="prompt">{{ prompt }}</div>
<div>
<input class="cmdline" autofocus
v-model.trim="command"
@keyup.enter="submit"
:readonly="submited" />
</div>
</div>
The submit() method then triggers an @submit-to-vue event to the parent method submitv() which creates an instance of the same component and adds it to the DOM.
//........
methods: {
submit: function () {
this.$emit('submit-to-vue')
this.submited = true
}
},
and
//......
methods: {
submitv: function () {
var ComponentClass = Vue.extend(consl)
var instance = new ComponentClass({
propsData: { output: this.output }
})
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)
What I aim to achieve?
I intend to generate a new consl component and append it to the DOM each time the previous one is submitted. (To simulate a terminal in my app)
The issue
Upon submission, the newly created component lacks the @submit-to-vue event listener, making it unable to call the submitv() method.
Queries
- How can I troubleshoot this problem?
- Is this approach suitable for VueJs or is there a more sophisticated method available?