2

Estoy tratando de crear un select que al darle clic a la opción dicha opción o el value de la opción se vaya a mi textarea.

Traté de hacerlo con un v-on:click desde el option pero no me funciona, así que agregué un v-on:change en el select para que me pudiese ejecutar el método. El problema es que estoy mostrando los datos en un bucle for y evidentemente de la forma que lo estoy haciendo la variable value se llena con el último valor del bucle. Además pueden ver que con la opción que estoy intentando agregar el texto es con Javascript, sería interesante saber si se puede hacer con Vuejs y que el texto nuevo no me reemplace al anterior.

<div id="app">
  <p v-on:click="addToText()">{{message}}</p>
  <select name="" id="tt" v-on:change="selectToText()">
    <option value="">Select</option>
    <option v-for="option in options" v-bind:value="value = option">{{option}}</option>
  </select><br>
  <textarea name="" id="textarea" cols="30" rows="10"></textarea>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: "VueJS",
      options: ['option 1', 'option 2', 'option 3'],
      value: ""
    },
    methods: {
      selectToText() {
        document.getElementById('textarea').value = this.value;
        console.log('added');
      }
    }
  });
</script>

1

1 respuesta 1

2
  • Para acceder a los elementos del DOM a través de VueJS no es necesario que uses métodos como getElementById().
  • Lo que deberías usar es la directiva v-model para vincular a un elemento del DOM con una clave del objeto data en tu instancia
  • Entonces tanto para el textarea como para el select deberás tener una clave
  • El evento efectivamente como lo mencionas es change el cual debe ir en la etiqueta select por tanto al momento el uso de click se puede descartar totalmente
  • Para lograr que los elementos se vayan acumulando en el textarea y no se sobre escriban entonces necesitas la sintaxis de: textarea += valorObtenido

Código:

    <div id="app">
      <select v-model="listado" @change="agregaElemento">
        <option value="">Select</option>
        <option  v-for="option in options">{{option}}</option>
      </select><br>
      <textarea v-model="recipiente" cols="30" rows="10"></textarea>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          options: [
            'elemento1',
            'elemento2'
          ],
          listado: '',
          recipiente: ''
        },
        methods: {
          agregaElemento () {
            this.recipiente += `${this.listado}-`
          }
        }
      });
    </script>

Referencia

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.