Vue js multi inputs

Question

Vue js multi inputs

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I created the following code for vue js to add multiple inputs but it does not work for me could you help me. When I click to add it refreshes the page.

This is my multi_text.vue component

<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>

Here I call it from 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}
  });
});

And in my view I have the following

<div id="este">
            <multi-text  > <multi-text/>

           </div>

What am I doing wrong?

ruby-on-rails vue.js

asked by HalleyRios 12.05.2018 в 04:17

source

2 answers

0

The solution using links is to prevent the behavior of the link with the click event:

@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 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 • .eleven • .passive

Here all the events explained: Vue events

answered by 10.07.2018 в 09:36

Average within a cycle? in JAVA how do I fill a Jlist with an ArrayList from a JFrame with a different class?

score 0 · Accepted Answer

Well in case it helps someone, so I solved it

The problem was with the links in some way they did not work, I changed it to a button and everything was fine, so I left my 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>