0

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?

2
  • no estaria del todo seguro, pero el problema no es que son un link? entonces provocarian la recarga si no usas router?
    – gbianchi
    Commented el 12 may. 2018 a las 8:32
  • Pues yo me base en este ejemplo donde usa link, aunque no veo que user router. codepen.io/webdesign/pen/WRogYj
    – HalleyRios
    Commented el 12 may. 2018 a las 17:13

2 respuestas 2

0

Bueno por si le sirve a alguien, asi lo resolvi

El problema era con los links de alguna forma no me funcionaban lo cambie a boton y todo bien , asi quedo mi template

<template>
  <div class="multi-text">
  <h5>Campos customizables</h5>
  <p>Hacer click sobre los (label) para editar el nombre de el campo </p>
    <form >
      <div class="form-inputs">  
        <div class="row" v-for="(campo, index) in campos" :key="index">
            <div class="col-sm-2">
              <label v-show = "campo.editable == false" @click = "campo.editable = true"> {{campo.nombre}}</label>
              <input v-show="campo.editable == true"
                type="text"
                placeholder="valor" 
                class="form-control" 
                v-model="campo.nombre"
                v-on:blur= "campo.editable=false;campo.soltoTecla=true"

              />
            </div>
             <div class="col-sm-2 ">
              <input 
                 type="text"
                 placeholder="valor" 
                 class="form-control" 
                 v-model="campo.valor"
              />
            </div>

           <div class="col-sm-2">
              <button
                type="button"
                class="btn-sm btn-danger"
                title = "Quitar"
                @click.prevent="deleteValue(index)"
                v-show="numeroCampos > 1"
                >
              <i class="fa fa-trash"></i>
            </button>
           </div>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <button
              type="button"
              class="btn-sm btn-primary"
              title = "Añadir"
              @click.prevent="addValue"
              >
              <i class="fa fa-plus"></i> 
            </button>
             <button
               type="button"
               class="btn-sm btn-primary"
               title ="Guardar"
               @click.prevent="guardarCambios"
            >
              <i class="fa fa-save"> Guardar</i>
            </button>
          </div>
        </div>
      </div>
    </form> 
      <!--  <pre> {{ $data | json }} </pre>  -->
  </div>
</template>
0

La solución utilizando links es prevenir el comportamiento del link con el evento del click:

@click.prevent=“method”

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details. To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot. • .stop • .prevent • .capture • .self • .once • .passive

Aquí todos los eventos explicados: Vue events

2
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – Marc
    Commented el 11 jul. 2018 a las 6:59
  • Editado. ¡Gracias!
    – Snsxn
    Commented el 12 jul. 2018 a las 11:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.