Deleting dynamic input fields in Vue

Question

Noob question but I can get fields to render in Vue but not sure how to delete my fields. I added an index option in the v-for directives but not sure what to do after that. Thanks!

Here is a working 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>

The short answer is that you need to remove the question from your questions array. How you want to handle that is up to you. You might want to remove just the last question, or you might want to remove by index. — David L
– David L, Commented Nov 18, 2016 at 15:06
Ok. I've updated JSFiddle and question. I can remove a question easy no problem. It's removing individual options on those questions that is giving me trouble. — maxwellgover
– maxwellgover, Commented Nov 18, 2016 at 15:26

David L · Accepted Answer · 2016-11-18 16:19:33Z

1

Based on your updated question, you have already solved for removing questions, although yev's answer is a much better way for removing questions.

To remove options, you need to add a new handler for removeOption that takes in both the question (which you are iterating over) and the option (which you are iterating over. Vue handles both of these scenarios for you. You can then find the index of the option and splice the array. See this fiddle.

template:

<button class="btn btn-danger" type="button" @click="removeOption(question, option)">
    X
</button>

component:

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

answered Nov 18, 2016 at 16:19

David L

34.1k8 gold badges70 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

euvl · Accepted Answer · 2016-11-18 16:15:08Z

1

Your delete button should look like:

<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>

Notice I've added i (index) in your for loop and click handler for X button.

Your remove function will look like:

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

Array.shift will remove only first item in the array which is not exactly what you want :)

answered Nov 18, 2016 at 16:15

euvl

4,7862 gold badges29 silver badges31 bronze badges

1 Comment

maxwellgover Over a year ago

Ah. Thanks! Much better.

Collectives™ on Stack Overflow

Deleting dynamic input fields in Vue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related