Question

Noob问题，但我可以在Vue中渲染字段但不知道如何删除我的字段。我在v-for指令中添加了一个索引选项，但在此之后不确定该怎么做。谢谢！

这是一个有效的JSFiddle：https://jsfiddle.net/xu55npkn/

<body>

<div id="app"></div>

<script>

const createNewOption = () => { 
    return {
    text: '',
    isAnswer: false
  }
}

const createNewQuestion = () => {
  return {
    text: '',
    options: [createNewOption()]
  }
}

  var vm = new Vue({
    el: '#app',
    template: `<div class="quiz-builder container">
<div v-for="question in questions">
  <div class="input-group">
    <input type="text" class="form-control" v-model="question.text" placeholder="Enter a question">
    <span class="input-group-btn">
      <button class="btn btn-danger" type="button">X</button>
    </span>
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="button" @click="addOption(question)">Add an option</button>
    </span>
  </div>
  </br>
  <div class="input-group" v-for="(option, index) in question.options" style="margin-bottom: 20px">
    <span class="input-group-addon">
      <input type="checkbox" v-model="option.isAnswer">
    </span>
    <input type="text" class="form-control" v-model="option.text" placeholder="Enter an option">
    <span class="input-group-btn">
      <button class="btn btn-danger" type="button">X</button>
    </span>
  </div></br>
</div>
<button class="btn btn-default" @click="addQuestion" :disabled="questions.length >= 5 ? true : false">
  Add another question
</button>
<button class="btn btn-primary" style="background-color: #ffcc00; border: #ffcc00">
  Create quiz
</button>
</div>`,
    data () {
    return {
      questions: [createNewQuestion()],
      showQuestions: false,
    }
  },
  methods: {
    addQuestion () {
        this.questions.push(createNewQuestion())
    },
    removeQuestion (index) {
       this.questions.shift(index)
    },
    addOption (question) {
        question.options.push(createNewOption())
    }
  }
})

</script>

Answer 1

您的删除按钮应如下所示：

<div v-for="(question, i) in questions">
  <div>
    <input v-model="question.text">
    <span>
      <button @click=removeQuestion(i)>X</button>
    </span>
    <span>
      <button @click="addOption(question)">Add an option</button>
    </span>
  </div>
</div>

注意我在for循环中添加了i（索引），并为X按钮单击了处理程序。

您的删除功能如下：

removeQuestion (index) {
  this.questions.splice(index, 1);
}

Array.shift将只删除数组中的第一个项目，这不完全符合您的要求：）

Answer 2

根据您更新的问题，您已经解决了删除问题的问题，尽管yev的答案是更好的方法来删除问题。

要删除选项，您需要为<button class="btn btn-danger" type="button" @click="removeOption(question, option)"> X </button>添加一个新的处理程序，它同时包含问题（您正在迭代）和选项（您正在迭代）.Vue处理这两个场景然后，您可以找到该选项的索引并拼接数组。请参阅此here。

模板：

removeOption (question, option) {
    var index = question.options.indexOf(option);
    if (index > -1) {
        question.options.splice(index, 1);
    }
}

成分：

.menu-item a, .menu-item a:link, .menuItem a:visited, .menuItem a:hover, .menuItem a:active {
    color: #222222;
    text-decoration: none;
}
.menu-item a:not([href]) {
  color:rgb(85,26,139);
}

在Vue中删除动态输入字段

2 个答案: