title: Deleting dynamic input fields in Vue
body: <p>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 <code>v-for</code> directives but not sure what to do after that. Thanks!  </p>
  
  <p>Here is a working JSFiddle: <a href="https://jsfiddle.net/xu55npkn/" rel="nofollow noreferrer">https://jsfiddle.net/xu55npkn/</a></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="app"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  const createNewOption = () =&gt; { 
      return {
      text: '',
      isAnswer: false
    }
  }
  
  const createNewQuestion = () =&gt; {
    return {
      text: '',
      options: [createNewOption()]
    }
  }
  
    var vm = new Vue({
      el: '#app',
      template: `&lt;div class="quiz-builder container"&gt;
  &lt;div v-for="question in questions"&gt;
    &lt;div class="input-group"&gt;
      &lt;input type="text" class="form-control" v-model="question.text" placeholder="Enter a question"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-danger" type="button"&gt;X&lt;/button&gt;
      &lt;/span&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-secondary" type="button" @click="addOption(question)"&gt;Add an option&lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;/br&gt;
    &lt;div class="input-group" v-for="(option, index) in question.options" style="margin-bottom: 20px"&gt;
      &lt;span class="input-group-addon"&gt;
        &lt;input type="checkbox" v-model="option.isAnswer"&gt;
      &lt;/span&gt;
      &lt;input type="text" class="form-control" v-model="option.text" placeholder="Enter an option"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-danger" type="button"&gt;X&lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;&lt;/br&gt;
  &lt;/div&gt;
  &lt;button class="btn btn-default" @click="addQuestion" :disabled="questions.length &gt;= 5 ? true : false"&gt;
    Add another question
  &lt;/button&gt;
  &lt;button class="btn btn-primary" style="background-color: #ffcc00; border: #ffcc00"&gt;
    Create quiz
  &lt;/button&gt;
  &lt;/div&gt;`,
      data () {
      return {
        questions: [createNewQuestion()],
        showQuestions: false,
      }
    },
    methods: {
      addQuestion () {
          this.questions.push(createNewQuestion())
      },
      removeQuestion (index) {
         this.questions.shift(index)
      },
      addOption (question) {
          question.options.push(createNewOption())
      }
    }
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>