1

我正在使用 Quasar 和 VueJS 创建一个应用程序。我能够在单击添加按钮时生成动态表单，但无法根据单击删除按钮删除任何新生成的表单。查找以下代码：

<template>              
<div v-for="h in htmlList">
     <div v-for="r in h" >
         <div v-html="r" v-on:click="useRemoveFromProject(1)" v-bind:id="r.id">
         </div>
    </div>               
</div>
</template>

<script>
/*
 * Root component
 */
import Vue from 'vue'
export default {
  name: 'q-app',
  data () {
    return {
      flag: 0,
      htmlList: [],
      select: 'fb',
      select1: 'fb1',
      multipleSelect: ['goog', 'twtr'],
      usersInProject: [],
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Select',
          value: 'fb'
        },
        {
          label: 'Twitter',
          value: 'twtr'
        },
        {
          label: 'Apple Inc.',
          value: 'appl'
        },
        {
          label: 'Oracle',
          value: 'ora'
        }
      ],
      selectOptions1: [
        {
          label: 'Integer',
          value: 'goog1'
        },
        {
          label: 'Float',
          value: 'fb1'
        },
        {
          label: 'String',
          value: 'twtr1'
        }
      ]
    }
  },
  methods: {
    useRemoveFromProject: function (id) {
      console.log('hi....')
      Vue.delete(this.htmlList, id)
    },
    identifyMe: function (event) {
      alert('hi - ' + event.target.id)
    },
    process: function () {
      this.flag += 1
      let temp = []
      temp.push('<div class="card" id="a_' + this.flag + '"> <div class="card-content content-center "> <large id="l4">Expression LHS:</large> <input><br> <large id="l5">Operators:</large> <q-select type="radio" v-model="this.select" :options="this.selectOptions"></q-select><br><large id="l4">Expression RHS:</large> <input><br><large id="l5">Data type:</large> <q-select type="radio" v-model="select1" :options="selectOptions1"></q-select><br></div><button class="cordova-hide circular red " style="margin-bottom:5px; margin-right:30px;"  v-on:click="userRemoveFromProject(i)"><i>delete</i></button><input value="click" type="button"> </div>')
      let ids = ['a_' + this.flag]
      console.log(ids)
      this.htmlList.push(temp)
    }
  }
}
</script>
4

1 回答 1

0

查看您的代码后，我注意到您有一些错误：

  • useRemoveFromProject没有'user'的'r'的调用函数
  • 单击元素时调用userRemoveFromProject，而不仅仅是删除按钮
  • userRemoveFromProject(i)使用 'i' 变量调用，但 'i' 是什么？
  • 为什么使用双精度v-for？一级就够了。

我向你推荐一个关于小提琴的工作示例。请让我知道它是否对您有用（如果是这样，请将其标记为解决）。

编辑：对于 Vue.js 2 https://jsfiddle.net/86216oko/

于 2017-07-03T12:48:19.357 回答