如何动态渲染vue中的元素

Question

vue动态追加素，元素内有数量不同的输入框，并且还要获得输入框中的内容

company: [],//第一个数组
personal: [],//第二个数组
add_enterprise(){   //第一个有6个输入框
        this.num +=1
        this.company.push({
            enterprise_lx: false,
            name: '',
            truename: '',
            credit: '',
            department: '',
            account: '',
            mobile: '',
            sort: 0,
            operator: ''
          });
      },
      add_person(){ // 有三个输入框
        this.personal.push({
            personal_lx: false,
            name: '',
            mobile: '',
            sort: 0
          });
      },

Answer 1

你已经定义了，同时你也使用了push。那么只要你正确的绑定就是可以的。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

直接用下标绑定就好了，算了直接上代码段好了

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div>
      <button @click='add_enterprise'>添加company</button>
      <section v-for='(item,index) in company' :key='index'>
        <div>
          <input type='checkbox' v-model="company[index].enterprise_lx"/>
        </div>
        <div>
          <input type='text' v-model="company[index].name"/>
        </div>
        <div>
          <input type='text' v-model="company[index].truename"/>
        </div>
        <div>
          <input type='text' v-model="company[index].credit"/>
        </div>
        <div>
          <input type='text' v-model="company[index].department"/>
        </div>
        <div>
          <input type='text' v-model="company[index].account"/>
        </div>
        <div>
          <input type='text' v-model="company[index].mobile"/>
        </div>
        <div>
          <input type='number' v-model="company[index].sort"/>
        </div>
        <div>
          <input type='text' v-model="company[index].operator"/>
        </div>
      </section>
      <article>company:{{ company }}</article>
    </div>
    <div>
      <button @clikc='add_person'>添加person</button>
      <section v-for='(item,index) in personal' :key='index'>
        <div>
          <input type='checkbox' v-model="personal[index].personal_lx"/>
        </div>
        <div>
          <input type='text' v-model="personal[index].name"/>
        </div>
        <div>
          <input type='text' v-model="personal[index].mobile"/>
        </div>
        <div>
          <input type='number' v-model="personal[index].sort"/>
        </div>
      </section>
      <article>personal:{{ personal }}</article>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      company: [],//第一个数组
      personal: [],//第二个数组
      num:0,
    };
  },
  methods: {
    add_enterprise(){
      this.num +=1
      this.company.push({
        enterprise_lx: false,
        name: '',
        truename: '',
        credit: '',
        department: '',
        account: '',
        mobile: '',
        sort: 0,
        operator: ''
      });
    },
    add_person(){
      this.personal.push({
        personal_lx: false,
        name: '',
        mobile: '',
        sort: 0
      });
    },
  }
};
</script>
</style>

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

最近是找到了解决的方法，把这两个放进一个数组里边，然后，数组加新的元素中，可以用一个值来判断他的类型，还有CSS，但是，因为渲染的不同是输入框的多少不同，并且后台要求传值的键名不一样，所以造成了传值取值不相同，新问题

Answer 4

vue2 数组的 push的数据 是无法双向绑定的
需要在 push 之后手动更新视图

this.company.push(...)
this.$forceUpdate()