Question

如果您能在这里帮助我，我将非常感激。本质上，我需要访问多个数组，以便根据下拉菜单中选择的选项调出略有不同的调查表。它适用于第一项，但不适用于其他项。不知道如何构造数组以使其工作。我还为此设置了一个JS小提琴：https://jsfiddle.net/cgeib79/6sehmuyk/2/。

HTML：

var app = new Vue({
    el: '.container',
    data: {
      surveys: [
        {
          options: ['agree',
                    'disagree']
        }
      ],
      show: true
    },

methods: {
  addNewSurveyForm (){
    // if (option == 'Agree-Disagree'){
    this.surveys.push({
      // agree: '',
      // neitherAgreeNorDisagree: '',
      // disagree: ''
    })
  // }
  },

  deleteSurveyForm (index){
    this.surveys.splice(index, 1)
  }

}

  })

       <style>

body {
    background-color: #ADD8E6;
}

.class container{
  background-color #FFFFFF;
  width: 100%;
  height: 100px;
}

.dropdown{
    background-color: #4F8CCC;
    padding: 1em 6em;
    margin: 1em 1em;
    color:black;
    font-weight: 1em;
}

.card {
  background-color:white;
  padding: 1em 1em;
  margin: 1em 1em;
}


.card-body{
  background-color: #FFFFFF;
  width: 100%;
}

.card-title {
  font-size: 1.3em;
}

.survey-form {
  background-color: #EBEFF1;
  width: 100%;
}

.form-control {
  background-color:white;
  width: 90%;
  padding: 1em 1em;
  margin: 1em 1em;
}



       </style>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>New Template</title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js" Vue.config.devtools = true;></script>

      </head>
  <body>
 
 <div class="class container" v-on:change="addNewSurveyForm" > 
<select class="dropdown" >
    <option >Agree-Disagree</option>
    <option >Satisfied-Dissatisfied</option>
    <option  >Yes-No</option>
    <option  >Likely-Unlikely</option>
    <option >Familiar-Not familiar</option>
</select> 

<div class="card" v-for="(survey, index) in surveys">
  
  <div class="card-body">
    <span class="float-right" style="cursor:pointer" @click="deleteSurveyForm(index)">x</span>

  <h2 class="card-title">Add question( Question # {{ index +1 }})</h2>

<div class="survey-form" v-for="(option) in survey.options">
  <input/>{{option}}

      </div>

    </div>

  </div>

</div>

任何回应将不胜感激。

亲切的问候，

基督徒

在下拉菜单中结合使用inVueJS中的嵌套数组或多个数组

0 个答案: