Vue 动态添加 删除选项

              
              // 这里是页面上展示的数据
              <div v-for="(item, index) in knowledgeItems" :key="true">
                <Row style="margin-top:20px;">
                  <Col span="4" style="font-size:18px;padding-left:32px;">标题{{index + 1}}：</Col>
                  <Col span="16"><i-input placeholder="请输入..." v-model="item.title"></i-input></Col>
                  <Col span="4" style="padding-left:20px;"> <Button type="primary" @click.native="deleteKnowledge(index)">删除</Button></Col>
                  <Col span="4" style="font-size:18px;margin-top:20px;padding-left:32px;">标题{{index + 1}}内容：</Col>
                  <Col span="16" style="margin-top:20px;">
                    <quillEditor v-model="item.content"></quillEditor>
                  </Col>
                </Row>
              </div>

<Row style="margin-top:20px;">
  <Col span="4">&nbsp;</Col>
  <Col span="16"><i-button style="100%" @click.native="addknowledgeItem()">+ 增加更多标题内容（点击此处）</i-button></Col>
</Row>

deleteKnowledge (index) {
  this.$Modal.confirm({
    title: '友情提示',
    content: '你确定要删除此条吗？',
    onOk: () => {
      this.knowledgeItems.splice(index, 1)
      this.knowledgeItems2 = this.knowledgeItems
    }
  })
}

addknowledgeItem () {
  let knowledge = {}
  knowledge.title = ''
  knowledge.content = ''
  this.knowledgeItems.push(knowledge)
  this.knowledgeItems2 = this.knowledgeItems
}