He creado el siguiente codigo para vue js para añadir multiples inputs pero no me funciona podrian ayudarme. Cuando doy click a añadir me refresca la pagina.
Este es mi componente multi_text.vue
<template>
<div class="multi-text">
<div v-for="(campo, index) in campos" :key="index">
<input type="text"
v-model="campo.first" @input="updateValue()" />
<input type="text"
v-model="campo.last" @input="updateValue()" />
<a href="#" @click="deleteValue(index)">x</a>
</div>
<a href="#" @click="addValue()">Add more</a>
<pre>
{{ $data | json }}
</pre>
</div>
</template>
<script>
export default {
// return empty data until init complete async
data() {
return {
campos: [{first: "ee", last: "ultimo"}]
};
},
// init with ajax to server to get data
methods: {
updateValue: function() {
},
deleteValue: function(index) {
this.campos.splice(index, 1);
//this.$emit('input', this.campos);
},
addValue: function() {
console.log("hola");
this.campos.push( { first: '', last: ''} );
//this.$emit('input', this.campos);
}
}
}
</script>
Aqui lo llamo desde rails webpack
import Vue from 'vue/dist/vue.esm'
import MyComponent from '../app.vue'
import MultiText from '../multi_text.vue'
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
var vueapp = new Vue({
el: '#este',
components: { MultiText}
});
});
Y en mi vista tengo lo siguiente
<div id="este">
<multi-text > <multi-text/>
</div>
Que estoy haciendo mal?