How to update a textarea with vue.js based on multiple inputs

Question

Just like the title says, I'm trying to update a textarea based off multiple inputs. I have that part working (with line-breaks) using jQuery, however when I try to get the value of that textarea and display it elsewhere using vue.js, it doesn't work. Even weirder, when I edit the vue.js data-bound fields, it erases the textarea until the inputs are re-edited. I'm new to vue.js so I'm a little confused as to what's happening here. Any help is appreciated.

Here's a Fiddle with the same code as below:

$(document).ready(function() {
  $(document).on('change keyup', 'input.url-field', function() {
    var inputs = $('input.url-field');
    var textareaVal = '';
    for (var i = 0; i < inputs.length; i++) {
      textareaVal += $(inputs[i]).val() + "\r\n";
    }
    $('textarea#urls').val(textareaVal);
  });
  // vue.js app
  new Vue({
    el: '#all',
    data: {
      phone: '',
      urls: ''
    }
  });
});

input, textarea{
  margin-bottom: 20px;
  display: block;
}

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all">
  <form>
    <label>Phone:</label>
    <input name="phone" v-model="phone" type="text">
    <label>URL1:</label>
    <input class="url-field" name="url1" type="text">
    <label>URL2:</label>
    <input class="url-field" name="url2" type="text">
    <textarea id="urls" name="urls" v-model="urls" cols="50" rows="5"></textarea>
  </form>
  <br>
  <table>
    <tr>
      <td><strong>Phone:</strong></td>
      <td>{{ phone }}</td>
    </tr>
    <tr>
      <td><strong>URLs:</strong></td>
      <td>{{ urls }}</td>
    </tr>
  </table>
</div>

Do you want to be able to edit the textarea or is it just a display field? — Bert
– Bert, Commented May 3, 2017 at 22:34

Bert · Accepted Answer · 2017-05-03 23:00:17Z

1

Assuming you are using the textarea as just a display field. Try this. Essentially, abandon using jQuery and let Vue manage the textarea.

new Vue({
  el: '#all',
  data: {
    phone: '',
    url1: null,
    url2: null
  },
  computed:{
      urls(){
        return [this.url1, this.url2].join("\r\n")
      }
  }
});

Updated fiddle.

If you wanted to be able to edit the textarea to add urls, you might try something like this.

edited May 3, 2017 at 23:00

answered May 3, 2017 at 22:38

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AlexM Over a year ago

Actually, there's just one issue. The 'url1', 'url2', etc. inputs are dynamically added with no defined limit. Each one is sequential in name, so the next one would be: <input class="url-field" name="url3" type="text"> So on and so forth. Is there an easy way to manage that using your method without having to define each one?

Bert Over a year ago

@Aender If you look at the second example (click this in the last sentence) I provide you with a way to handle any number of urls.

AlexM Over a year ago

I didn't even see that. Thanks!

Collectives™ on Stack Overflow

How to update a textarea with vue.js based on multiple inputs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related