为什么我的vue.js按钮无法创建新的文本区域?

时间:2019-06-13 11:39:45

标签: javascript html vue.js

我正在使用vue.js开发第一个Web应用程序,我希望有一个按钮,当单击该按钮时会创建一个新的文本区域。当我在jsfiddle上检查它时似乎工作正常,但是当我在Visual Studio中加载它并运行它时,我没有得到任何结果,并且textarea和按钮没有显示。

<!-- 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: '',
            });
        }
    }
});

我希望每次按下按钮时都会创建一个文本框。该文本框应显示在上一个文本框的下方。虽然发生了什么,但是我没有看到该按钮或任何文本框。在此先感谢您抽出宝贵的时间来考虑这一点!

1 个答案:

答案 0 :(得分:1)

data属性必须是一个函数(返回对象)。否则,它只能在第一次渲染时初始化一次。

更改为此,它应该可以工作:

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

而且,在使用模板文字时,必须使用反引号(`),因此方法应为:

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