Why does my vue.js button not create a new textarea?

Question

I am working on my first Web App using vue.js and I want to have a button that will create a new textarea when clicked. It seems to work fine when I checked it at jsfiddle, but when I load it in visual studio and run it, I do not get any results and the textarea and button do not display.

<!-- HTML -->
<div id="column1" style="float:left; margin:0; width:25%;">
            <h4>Column Header</h4>
            <div id="tile">
                <input type="button" value="+" @click="addInput">
                <div class="inputArea" v-for="input in inputs" :key="input.id">
                    <textarea placeholder="Enter text... " :id="input.id" v-model="input.value"></textarea>
                </div>
            </div>
        </div>


/* Vue.js on my main.js */
var tile = new Vue({
    el: '#tile',
    data: {
        counter: 0,
        inputs: [{
            id: 'text0',
            value: '',
        }],
    },
    methods: {
        addInput() {
            this.inputs.push({
                id: 'text${++this.counter}',
                value: '',
            });
        }
    }
});

I expected a textbox to be created each time the button is pressed. The textbox should appear beneath the previous one. What is happening though is I don't see either the button or any textboxes. Thanks in advance for taking the time to consider this!

There aren't any errors in the console that I can see and I do have import vue installed. When I run it from VS 2017, it opens in IE version 11.1146.16299.0 (incase that helps) — Alastair_Handler
– Alastair_Handler, Commented Jun 13, 2019 at 12:00

BorisTB · Accepted Answer · 2019-06-13 12:08:02Z

1

data property must be a function (returning object). Otherwise it's initialised only once on first render.

Change it to this and it should work:

data() {
  return {
    counter: 0,
    inputs: [{
      id: 'text0',
      value: '',
    }],
  }
}

And also, when using template literals, you have to use back-ticks ( ` ), so the method should be:

addInput() {
  this.inputs.push({
    id: `text${++this.counter}`,
    value: '',
  });
}

edited Jun 13, 2019 at 12:08

answered Jun 13, 2019 at 11:57

BorisTB

1,8281 gold badge19 silver badges28 bronze badges

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

2 Comments

Alastair_Handler Over a year ago

I have made both of these changes and while they work at jsfiddle.net/chrisvfritz/50wL7mdz (replacing the HTML and JS with my code), I still don't see any change when running out of VS. And thank you very much for the quick reply to my question.

Alastair_Handler Over a year ago

To update, it now works in my app when I add <script src="cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> to the <head> and place the javascript at the bottom of the body in my index.html. But it doesn't seem to work if it is on the main.js page. I had also included src="main.js" but that didn't help.

Collectives™ on Stack Overflow

Why does my vue.js button not create a new textarea?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related