0

El asunto es el siguiente, estoy tratando de hacer una vista previa de un cuestionario, entonces lo que hago es traer la información y darle el formato que el mismo usuario eligio cuando creo la encuesta, los datos se traen con relaciones y todo bien hay, el problema surge cuando marco opciones de la encuesta, que para traer la informacion lo hago en un v-for, la información varia, pero el v-model no, entonces quisiera como darle un v-model distinto a cada pregunta, un ejemplo de lo que esta pasando el codigo seria este:

<h1 class="page-title">Vista previa</h1>
    <el-col :xs="24" :md="24">
        <el-card>
            <div slot="header">
                <h1 class="page-title">{{survey.name}}</h1>
                    <span>
                        {{survey.description}}
                    </span>
             </div>
             <div v-for="item in survey.survey_questions">
                 <h2 class="mt-1 title-question">{{item.question}} 
                     <span class="optional" v-if="item.optional===1"></span>
                 </h2>
                 <div v-if="item.response_type_id===1">
                     <el-input type="textarea" v-model="textarea" class="mb-2" prop="text-area">
                     </el-input>
                 </div>
                 <div v-if="item.response_type_id===2">
                     <el-checkbox-group v-model="checked" :min="0" :max="1">
                         <div v-for="option in item.survey_question_option" prop="option">                                                                          
                             <el-checkbox :label="option.id">
                                 {{option.option}}
                             </el-checkbox>
                          </div>
                     </el-checkbox-group>
                 </div>
                 <div v-if="item.response_type_id===3">
                     <el-rate :texts="texts(item.rank)"
                               v-model="ranks"
                               :max="item.rank"
                               :show-text="show(item.show_text)"
                               allow-half>
                      </el-rate>
                 </div>
                 <div v-if="item.response_type_id===4">
                     <el-radio-group v-model="yesno">
                         <el-radio label="Si"></el-radio>
                         <el-radio label="No"></el-radio>
                      </el-radio-group>
                 </div>
             </div>
         </el-card>
     </el-col>

Para resumir mi problema es que, cuando se le da clic a una pregunta, se seleccion todas las de su mismo tipo y eso es porque el v-model es el mismo, yo quisiera saber una forma para que esto no pasara o como podria tener un v-model para cada pregunta

2 respuestas 2

1

La manera de conseguir un v-model propio en un array de objetos, es añadiendo una propiedad que contenga el valor, como ya te respondieron.

Pero hay que tener en cuenta de que Vue 2 (Dicen que estara corregido para la version 3) no se entera de los cambios cuando se añade una propiedad nueva a un objeto, lo cual no se vuelve reactiva la misma. Para evitar esto, hay que forzar a Vue a que vuelva a recorrer el objeto, esto se puede hacer de varias maneras:


this.survey.survey_questions = this.survey.survey_questions.map(item => {

    item.answer = ''

    return item

})


this.survey.survey_questions.forEach(item => {

    item.answer = ''

})

this.survey.survey_questions = JSON.parse(JSON.stringify(this.survey.survey_questions))

Otra manera de evitar esto, es hacer el recorrido asignando el valor vacio a los objetos antes de asignarlo a un data.

0

Puedes intentar agregar una propiedad a los elementos de survey.survey_questions como la siguiente forma

this.survey.survey_questions.map((item) => {
    item.answer = ''; //Cadena vacía
    return item;
});

Luego, dentro del v-for, el v-model de cada uno será item.answer

<div v-for="item in survey.survey_questions">
                 <h2 class="mt-1 title-question">{{item.question}} 
                     <span class="optional" v-if="item.optional===1"></span>
                 </h2>
                 <div v-if="item.response_type_id===1">
                     <el-input type="textarea" v-model="item.answer" class="mb-2" prop="text-area">
                     </el-input>
                 </div>
</div>
1
  • hice algo parecido pero con algunas modificaciones el problema es que al darle clic, a escribir o ponerle un rate, los valores siguen en blanco o nulos, no se porque Commented el 13 nov. 2019 a las 16:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.