在Vue中刪除動態輸入字段

Noob問題，但我可以在Vue中獲取字段，但不知道如何刪除我的字段。我在v-for指令中添加了一個索引選項，但不知道在那之後要做什麼。謝謝！在Vue中刪除動態輸入字段

這裏是一個工作的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>

來源

2016-11-18 maxwellgover

簡而言之，您需要從問題數組中移除問題。你想如何處理這取決於你。您可能只想刪除最後一個問題，或者您可能希望按索引刪除。 –

好的。我更新了JSFiddle和問題。我可以刪除一個容易沒問題的問題。它會消除那些給我帶來麻煩的問題的個別選項。 – maxwellgover

數組中刪除僅第一個項目，你已經解決爲了消除問題，雖然耶夫的答案是一個更好的方式來消除問題。如果您想刪除選項，您需要爲removeOption添加一個新的處理程序，它接受問題（您正在迭代的問題）和選項（您正在迭代的選項），Vue爲您處理這兩種情況。然後可以找到選項的索引和拼接陣列看到這個fiddle

模板：。

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

組件：

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

來源

2016-11-18 16:19:33

你刪除按鈕應該是這樣的：

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

通知我添加i（指數）在你的for循環並點擊X按鈕的處理程序。

你刪除的功能將類似於：

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

Array.shift會這不正是你想要的:)根據您的更新問題

來源

2016-11-18 16:15:08 euvl

啊。謝謝！好多了。 – maxwellgover

在Vue中刪除動態輸入字段

回答

相關問題