Я был бы очень признателен, если бы вы могли помочь мне здесь.По сути, мне нужно получить доступ к нескольким массивам, чтобы вызвать несколько разные формы опроса в зависимости от параметра, выбранного в раскрывающемся меню.Это работает для первого элемента, но не для другого элемента.Не уверен, как структурировать массивы, чтобы сделать эту работу.Я также настроил скрипту 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>
Любой ответ был бы наиболее признателен.
С уважением,
Кристиан