Question

我正在使用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: '',
            });
        }
    }
});

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

Answer 1

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

更改为此，它应该可以工作：

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

而且，在使用模板文字时，必须使用反引号（`），因此方法应为：

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

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

1 个答案: