Declare reactive data properties in vue.js?

Question

I have a very basic vue.js app:

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],

  data: {
    messages: [
      'Hello from Vue!',
      'Other line...'
    ]
  }

})

The following html works fine:

  <div class="container" id="app">
    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <span v-for="msg in messages">${msg}</span>
      </div>
    </div>
  </div>

However very similar html block does not:

  <div class="container" id="app">
    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <textarea id="chat_area" readonly="" rows="20">
          <span v-for="msg in messages">${msg}</span>
        </textarea>
      </div>
    </div>
  </div>

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

I'm using Vue v2.3.3. What could be the problem?

The documentation says it doesn't work within textareas

MiltoxBeyond
– MiltoxBeyond

2017-05-19 12:51:35 +00:00
Commented May 19, 2017 at 12:51 — MiltoxBeyond
– MiltoxBeyond, Commented May 19, 2017 at 12:51

tony19 · Accepted Answer · 2022-07-15 21:46:39Z

As documentation says, interpolation in textareas won't work, so you need to use v-model.

If the only thing you want to do is to display html inside textarea, you could in theory use an ugly workaround by wrapping your array fields inside a function and set that function as textarea v-model:

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    messages: [
      'Hello from Vue!',
      'Other line...'
    ]
  },
  computed:{
    multiLineMessages: function(){
      var result = "";
      for(var message of this.messages){
        result += '<span>' + message + '</span>'
      }
      return result;
        }
    }
});

template part:

<div class="container" id="app">
    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <textarea v-model="multiLineMessages" placeholder="add multiple lines">
        </textarea>
      </div>
    </div>
  </div>

It's more like a proof that it's doable but I highly don't recommend using it anywhere, as html shouldn't be generated this way (especially larger chunks of it).

jsFiddle preview

Collectives™ on Stack Overflow

Declare reactive data properties in vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related