我正在使用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: '',
});
}
}
});
我希望每次按下按钮时都会创建一个文本框。该文本框应显示在上一个文本框的下方。虽然发生了什么,但是我没有看到该按钮或任何文本框。在此先感谢您抽出宝贵的时间来考虑这一点!
答案 0 :(得分:1)
data
属性必须是一个函数(返回对象)。否则,它只能在第一次渲染时初始化一次。
更改为此,它应该可以工作:
data() {
return {
counter: 0,
inputs: [{
id: 'text0',
value: '',
}],
}
}
而且,在使用模板文字时,必须使用反引号(`),因此方法应为:
addInput() {
this.inputs.push({
id: `text${++this.counter}`,
value: '',
});
}