Vue. js dynamically adds and deletes the instance code of the selected question, and vue. js selects the question

Vue. js dynamically adds and deletes the instance code of the selected question, and vue. js selects the question

Let's take a look at the page effect. Dangdang '''''''''''''''''''''''

In the figure, the second choice is that Xiao Ying clicked the "add answer" button and then came out. When you clicked the "delete option" or "delete answer" button, the corresponding options and choices will be deleted.

Html code

<Template> <div class = "main-container"> <div class = "form-horizontal"> <template v-for = '(subjectIndex, subject) in question '> <div class = "form-group"> <label class = "col-sm-1 control-label"> topic: </label> <label class = "col-sm-2 control-label red remove-pad" v-if = '$ index> 0' @ click = 'deletesubjectfun (subjectIndex) '> Delete the topic </label> </div> <div class = "form-group"> <label class = "col-sm-1 control-label"> title: </label> <div class = "col-sm-2"> <input type = "text" class = "form-control" placeholder = "not filled" v-model = 'subject. title '> </div> <div class = "form-group"> <label class = "col-sm-1 control-label"> correct answer: </label> <div class = "col-sm-1"> <input type = "text" class = "form-control answer" placeholder = "not filled" readonly = "true" v- model = 'subject. answer '> </div> <span class = "prompting-message"> In the following options, check out the correct answer </span> </div> <div class = "form-group"> <label class = "col-sm-1 control-label"> score: </label> <div class = "col-sm-1"> <input type = "number" min = "1" max = "100" class = "form-control" v-model = 'Subject. score '@ keyup =' scoreFun (subjectIndex) '> </div> <div class = "form-group"> <label class = "col-sm-1 control-label"> options: </label> </div> <div class = "form-group"> <div class = "col-sm-3 mg1"> <ul class = "upper-latin"> <template v -for = '(opdtIndex, opdt) in subject. optionsData '> <li> <input type = "checkbox" class = "checkbox-answer" v-model = 'subject. answer 'value = '{opdt. id }}'> <div class = "options-div"> <input type = "text" class = "form-control options-input" placeholder = "not filled" v- model = 'oss. options'> <label class = "control-label blue remove-pad" v-if = 'opdtindex = subject. optionsData. length-1 '@ click = 'addnewoptionsfun (subjectIndex, opdtIndex) '> New Options </label> <label class = "control-label red remove-pad" v-if = 'opdtindex> 0' @ click = 'deleteoptionsfun (subjectIndex, opdtIndex) '> delete option </label> </div> </li> </template> </ul> </div> <div class = "form-group "> <div class =" col-sm-offset-1 col-sm-4 "> <button class =" blue boder "@ click = 'addnewsubjectfun (subjectIndex) '> New answer </button> </div> <div class = 'split-line'> </div> </template> <div class = "form -group "> <div class =" col-sm-offset-1 col-sm-4 "> <button class =" btn-primary "@ click = 'savequestionfun'> submit </button> </div> </div> </template>

Js Code

<Script> export default {components :{}, props :{}, methods :{// addNewSubjectFun: function (index) {var subjectDataMes ={}; subjectDataMes. id = index + 2; subjectDataMes. title = ''; subjectDataMes. answer = []; subjectDataMes. score = 10; subjectDataMes. optionsData = [{id: 'A', options: ''}]; this. question. push (subjectDataMes) ;}, // The score of each question cannot be less than zero or greater than one hundred scoreFun: function (index) {if (this. question [index]. score <0) {this. question [index]. score = 10; this. $ root. tipStr = 'topic selection "'+ this. question [index]. title + '"cannot be less than zero';} else if (this. question [index]. score> 100) {this. question [index]. score = 10; this. $ root. tipStr = 'topic selection "'+ this. question [index]. title + '"cannot have a score greater than one hundred';}, // Delete the esubjectfun: function (index) {this. question. splice (index, 1) ;}, // New Option addNewOptionsFun: function (subjectIndex, opdtIndex) {var optionsDataMes ={}; optionsDataMes. id = String. fromCharCode (64 + (opdtIndex + 2); // converts an id from a number to a letter. optionsDataMes. options = ''; var subjectDataMes = this. question [subjectIndex]. optionsData; subjectDataMes. push (optionsDataMes) ;}, // delete option deleteOptionsFun: function (subjectIndex, opdtIndex) {var subjectDataMes = this. question [subjectIndex]. optionsData; subjectDataMes. splice (opdtIndex, 1) ;}, saveQuestionFun: function () {this. question; debugger ;}}, ready: function () {}, data () {return {question: [{id: 1, title: '', answer: [], score: 10, optionsData: [{id: 'A', options: ''}],}], }}</script>

Css code

<style scoped>.mg1 {padding: 8px 0 0 113px;}.upper-latin {list-style-type: upper-latin;}input.form-control.options-input {display: inline-block; /*width: 499.16px;*/width: 100%;}.boder {border: 1px solid;background-color: #fff;border-radius: 4px;line-height: 34px;padding: 0 15px;}.blue {color: #2689cd;text-align: center;}label.red {color: #c9302c;}label.remove-pad {/*padding: 10px 20px 10px 15px;*/line-height: 34px;text-align: left;}.split-line {height: 10px;border-top: 2px dashed #E7E8EC;width: 900px;}.prompting-message {line-height: 34px;}.options-div {margin-left: 26px;margin-top: -25px;padding-bottom: 25px;}</style>

The above is a small series of Vue. js dynamically adds and deletes the selected instance code, hoping to help you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!