Question

我想要这样的事情，如果我点击＆＃34; 添加另一个＆＃34;按钮另一组输入框应该在这个集合下面呈现，这个集合＆＃34; 添加另一个＆＃34;按钮应更改为＆＃34; 删除此学校＆＃34;并且最大输入行数应限制为5。

我希望你理解我的要求。我想要的是用户可以进入5所学校或少于5所学校。如果他不小心添加了一些错误的信息，他应该有一个删除按钮来删除该记录。我怎么做到这一点使用Vue JS。这是我的代码。

<template>
  <div id="app">
    <p>Please enter the schools you attained (Maximum five)</p>
    School Name : <input type="text" name="" value="">
    Location  : <input type="text" name="" value="">
    <button type="button" name="button" @click="addAnotherInputBox">Add Another</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      counter:0

    }
  },
  methods:{
    addAnotherInputBox(){

    }
  }
}
</script>

Answer 1

在这里，尽管你应该已经填写了添加按钮的逻辑，但你可以通过自己的

来完成

这是一个工作小提琴：https://jsfiddle.net/Sletheren/Lo7t0myL/

<template>
  <div id="app">
    <p>Please enter the schools you attained (Maximum five)</p>
    School Name : <input v-model="name" type="text" name="" value="">
    Location  : <input v-model="location" type="text" name="" value="">
    <button type="button" name="button" @click="addAnotherInputBox">Add Another</button>
    <ul class="schools">
        <li v-for="school in schools">
            {{school.name}} <button @click="removeSchool(school)">remove</button>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      counter:0,
      name: '',
      location:'',
      schools: []
    }
  },
  methods:{
    addAnotherInputBox(){
        // your logic here...
       if(this.counter>4){
           alert('you should delete one first! only 5 allowed')
       }else{
            const school = {
                name: this.name, //name here
                location: this.location //location here
            }
            this.counter++;
            this.schools.push(school)
            this.name='';
            this.location=''
       }
    },
    removeSchool(school) {
        this.schools.splice(this.schools.indexOf(school),1);
        this.counter--;
    }
  }
}
</script>

Vue JS动态插入和删除html元素

1 个答案: