Using V-model to bind to an object dynamically created in an array

Question

Using V-model to bind to an object dynamically created in an array

I am trying to create objects dynamically in an array and use v-model with an input. Here is my code snippet:

This is the array structure

new_questions:{
    questionrecord: []
}

This is the input field setup

<div class="form-fields" v-for="(field, index) in question_fields">
    <div class="form-group">
        <select class="form-control" v-model="new_questions.questionrecord[index].questionresponse">
            <option value="single_answer">Single Answer (For regular question)</option>
            <option value="multiple_answer">Multiple Answer (For situational judgement question)</option>
        </select>
    </div>
</div>

The expected output of the array should be like

new_questions:{
    questionrecord: [
        {
            questiontype: "single_answer"
        },
        {
            questiontype: "multiple_answer"
        },
        ...
    ]
}

However, I encounter an error message:

[Vue warn]: Error in render: "TypeError: Cannot read property 'questionresponse' of undefined

Can anyone advise on how to fix this issue?

javascript vue.js vuejs2

Answer 1

Answer №1

The V-Model simplifies the syntax for handling input and value bindings.

If you need to manipulate data in a way that involves distinguishing between input and value properties, you may have to create a setter method that can handle dynamically changing or even non-existent properties.

Depending on the complexity of your data structure and whether you need to work with properties at different nested levels, your setter method could become quite intricate. Utilizing helpers like lodash.setWith might make this task easier.

Here's a specific example tailored to your scenario:

<template>
...
  <div class="form-fields" v-for="(field, index) in question_fields">
    <div class="form-group">
      <select class="form-control"
       :value="new_questions.questionrecord[index].questionresponse"
       @input="setValue($event.target.value, index)"
      >
        <option value="single_answer">Single Answer (For regular question)</option>
        <option value="multiple_answer">Multiple Answer (For situational judgement question)</option>
      </select>
    </div>
  </div>
...
</template>

<script>
export default {
  data() {
    return {
      new_questions: {
        questionrecord: [],
      }
    };
  },

  created() {
    // prepopulate your questionrecord array so you don't throw TypeErrors
    const dummyArray = Array(this.question_fields.length);
    this.new_questions.questionrecord.push(...dummyArray);
  },

  methods() {
    setValue(value, index) {
      const newRecord = {
        questionresponse: value,
      };
      // To properly update Vue array entries, avoid setting values by index directly
      this.new_questions.questionrecord.splice(index, 1, newRecord);
      // Use Vue.set(rootObj, key, value) for creating object properties
    }
  }
};
</script>

Answer 2

The V-Model simplifies the syntax for handling input and value bindings.

If you need to manipulate data in a way that involves distinguishing between input and value properties, you may have to create a setter method that can handle dynamically changing or even non-existent properties.

Depending on the complexity of your data structure and whether you need to work with properties at different nested levels, your setter method could become quite intricate. Utilizing helpers like lodash.setWith might make this task easier.

Here's a specific example tailored to your scenario:

<template>
...
  <div class="form-fields" v-for="(field, index) in question_fields">
    <div class="form-group">
      <select class="form-control"
       :value="new_questions.questionrecord[index].questionresponse"
       @input="setValue($event.target.value, index)"
      >
        <option value="single_answer">Single Answer (For regular question)</option>
        <option value="multiple_answer">Multiple Answer (For situational judgement question)</option>
      </select>
    </div>
  </div>
...
</template>

<script>
export default {
  data() {
    return {
      new_questions: {
        questionrecord: [],
      }
    };
  },

  created() {
    // prepopulate your questionrecord array so you don't throw TypeErrors
    const dummyArray = Array(this.question_fields.length);
    this.new_questions.questionrecord.push(...dummyArray);
  },

  methods() {
    setValue(value, index) {
      const newRecord = {
        questionresponse: value,
      };
      // To properly update Vue array entries, avoid setting values by index directly
      this.new_questions.questionrecord.splice(index, 1, newRecord);
      // Use Vue.set(rootObj, key, value) for creating object properties
    }
  }
};
</script>

Answer 3

Answer №2

Not sure what your question_fields look like, but I tested this code with some placeholder values and it worked fine for me.

new Vue({
  el: "#app",
  data() {
    return {
      question_fields: ['test', 'test1'],
      new_questions:{
          questionrecord: [
              {
                  questiontype: "single_answer"
              },
              {
                  questiontype: "multiple_answer"
              }
          ]
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="form-fields" v-for="(field, index) in question_fields">
    <div class="form-group">
      <select class="form-control" v-model="new_questions.questionrecord[index].questionresponse">
        <option value="single_answer">Single Answer (For regular question)</option>
        <option value="multiple_answer">Multiple Answer (For situational judgement question)</option>
      </select>
    </div>
  </div>
  
   <pre>{{new_questions.questionrecord}}</pre>
</div>

Answer 4

Not sure what your question_fields look like, but I tested this code with some placeholder values and it worked fine for me.

new Vue({
  el: "#app",
  data() {
    return {
      question_fields: ['test', 'test1'],
      new_questions:{
          questionrecord: [
              {
                  questiontype: "single_answer"
              },
              {
                  questiontype: "multiple_answer"
              }
          ]
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="form-fields" v-for="(field, index) in question_fields">
    <div class="form-group">
      <select class="form-control" v-model="new_questions.questionrecord[index].questionresponse">
        <option value="single_answer">Single Answer (For regular question)</option>
        <option value="multiple_answer">Multiple Answer (For situational judgement question)</option>
      </select>
    </div>
  </div>
  
   <pre>{{new_questions.questionrecord}}</pre>
</div>

Using V-model to bind to an object dynamically created in an array

Answer №1

Answer №2

Similar questions

Making text strike-through when checkbox is marked

As the second line of Javascript code is being executed, the first line is still

The use of fs.writeFileSync is invalid and will not work for this operation

Setting the ng-href attribute in Angular conditionally using a function

Using the scrollIntoView() method in VUE.js to center an li element within a component

Tips for triggering the .click() function upon returning to index.html after visiting a different page

Issue with passing function argument through ng-change event is not being resolved

What is the best method to loop through this object with JavaScript?

What is the best way to successfully send an object through AJAX once all its updates are completed?

Tips for building a diverse array of data types and effectively utilizing them based on their specific type in Typescript

inability to conceal a two-dimensional marker array within Google Maps API v3

Having trouble establishing a connection to MySQL through NodeJS and Express

Tips for resolving the problem of Google Maps repeatedly appearing when utilizing the Auto-Loading feature

Calculate the sum of each row within a grouped object

REACT Error: Unable to access the 'value' property as it is undefined

Display an icon before an active v-list-item in Vuetify 3's v-list

Using jQuery to create a fade in/fade out effect within a list of items

Divide arrays and merge them into new arrays depending on their position using indexOf in JavaScript

Is there a way to create a list of languages spoken using Angular?

Retrieve elements within the array ranging from index 1 to 5 using Javascript