Add dynamically input in vuejs and display data

Question

I'm using vue2 and laravel 6, and i'm trying to add input field into my table where the data:activities had a relationship with scores

<button type="button"  @click="addAct" >add activity</button>
<tr v-for="(student,index) in students" :key="index">
  <td v-for="(quiz,i) in activities" :key="i">
     //When I used this i can display my data coming from DB. but i get an error
        <input  v-model="quiz.scores[index].scores"autocomplete="off" />
     //When i used this input i can add dynamically but i can't display my DB data
        <input  v-model="quiz.scores[index]" autocomplete="off" />
  </td>
</tr>

data() {
return {
    activities:[{"id":42,"activity_title":"1","hps":"1",
      "scores":[
          {"id":158,"scores":2,"student_id":1,"activity_id":42},
          {"id":159,"scores":2,"student_id":2,"activity_id":42},
          {"id":160,"scores":2,"student_id":3,"activity_id":42},
          {"id":161,"scores":2,"student_id":4,"activity_id":42}]
         }],
     students:[
          {"name":"Ellis Corkery MD","id":1},
          {"name":"Lucie Rau""id":2},
          {"name":"Delia Donnelly","id":3},
          {"name":"Chyna Barton","id":4}]
}
},
methods:{

   addAct: function() { 
       this.activities.push( { activity_title: [], hps:[], scores:[] );
       },
}

[Vue warn]: Error in render: "TypeError: quiz.scores[_vm.index] is undefined". I get this when i try using the first input into my template

Sorry. i forgot, but the index is props and i'm displaying a relationship into my input where the scores:[] have many values @ Robert Rocha — cupcave
– cupcave, Commented Mar 5, 2020 at 3:42
I still don't see where quiz is defined, you are linking quiz to a model? — Robert
– Robert, Commented Mar 5, 2020 at 4:04

Prabhat Gupta · Accepted Answer · 2020-03-05 06:30:46Z

1

In your Example you are pushing an object having scores an array with Zero length. and in you template you are looking for quiz.scores[index].scores thus the error it throws is correct

Vue warn]: Error in render: "TypeError: quiz.scores[_vm.index] is undefined". I get this when i try using the first input into my template

v-model is looking for any variable which does not exist and so the error

answered Mar 5, 2020 at 6:30

Prabhat Gupta

1375 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cupcave Over a year ago

Then how can i display my scores at the same time add an input field? @Prabhat Gupta

Prabhat Gupta Over a year ago

you should check whether you have such a property or not before you v-model with a v-if and do not render an input if such property does not exist like v-if="quiz.scores[index]"

cupcave Over a year ago

thnaks. This did the work, but now i'm getting an error. [Vue warn]: Cannot set reactive property on undefined, null, or primitive value. . When i tried to edit or insert a value.

Prabhat Gupta Over a year ago

surly you will get the warning as per vue Implementation you need to define your all properties upfront that you are using in your template. however the properties you are assigning using push is dynamic and not reactive. And to solve that you need to use this.$set() please folllow the bellow link to understand more. vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Hamelraj · Accepted Answer · 2020-03-05 04:53:47Z

0

Your activities data each item doesn't has scores so in you activities array first object has scores as per your data this should work

<tr v-for="(student,index) in students" :key="index">
  <td >
     //Now this should work
        <input  v-model="activities[0].scores[index]"autocomplete="off" />
     //as per data you have to check this 
        // <input  v-model="quiz.scores[index]" autocomplete="off" />
  </td>
</tr>

answered Mar 5, 2020 at 4:53

Hamelraj

4,8464 gold badges21 silver badges42 bronze badges

1 Comment

cupcave Over a year ago

When i use this <input v-model="quiz.scores[index].scores" autocomplete="off" /> i can display my scores in my input. It's almost the same with yours. but how can i add another input field so i can insert another scores when i clicked the button.

anjarwidi83 · Accepted Answer · 2020-03-06 06:20:39Z

0

You can try change the quiz as v-model of activity like this :

<tr v-for="(student,index) in students" :key="index">
  <!-- Filter Student Scores -->
  <td>{{student.name}}</td>
  <td v-for="(iact, i) in activities" :key="i">
    <!-- Get Specific Student Score based on student_id -->
    <div v-for="(quiz, i2) in iact.scores" :key="i2">
      <input v-if="iact.scores[i2].student_id == student.id" v-model="iact.scores[i2].scores">
    </div>
  </td>
</tr>

In order to get addAct function work properly you should add initial value of the score like this :

this.activities.push({
    id: "",
    activity_title: "",
    hps: "",
    scores: [
      { id: 170, scores: null, student_id: 1, activity_id: 43 },
      { id: 170, scores: null, student_id: 2, activity_id: 43 },
      { id: 170, scores: null, student_id: 3, activity_id: 43 },
      { id: 170, scores: null, student_id: 4, activity_id: 43 }
    ]
  });

This is because you bind the v-model to the object of activity[array].score[array].score. Put empty value will lead to error.

My Previous answer :

Do you want to display each student activity score like this : ?

Name     | Activity 1 | Activity 2 |
---------+------------+-------------+
Student 1|    xxx     |    xxx     |
Student 2|    xxx     |    xxx     |

If yes, than may be you can try this :

<!-- Show Each Student Activity Scores :  n row  -->
<tr v-for="(student,index) in students" :key="index">
  <!-- For easier reading -->
  <td>{{student.name}}</td> 
  <!-- Loop each activity / quiz -->
  <td v-for="(quiz, i) in activities" :key="i">
    <!-- Get Specific Student Score based on student_id --> 
    <input v-if="quiz.scores[index].student_id == student.id" v-model="quiz.scores[index].scores">
  </td> 
</tr>

I have try it using codesandbox here : https://codesandbox.io/s/sample-activity-tlckd Hope that help

edited Mar 6, 2020 at 6:20

answered Mar 5, 2020 at 13:41

anjarwidi83

4963 silver badges8 bronze badges

6 Comments

cupcave Over a year ago

thanks for some answers, but the addAct is only pushing to add new input field where i can insert some additional values to save into my DB. The activities holds my data's that's why i need 2 input. 1 is for displaying my values and 1 is for inserting. <input v-if="scores.scores[index].index" v-model="scores.scores[index]" autocomplete="off" placeholder="first" /> <input v-else v-model="scores.scores[index]" autocomplete="off" placeholder="second" />

anjarwidi83 Over a year ago

I see... you are using quiz like as a dynamic variables. I suggest you use different approach here, because if you are using v-model=quiz then it should be bind to reactive properties quiz declared inside data. Maybe you can try put the scores also in quiz ( array ) like activity.

cupcave Over a year ago

Sorry. but i don't see any progress to codesandbox . I need the button:add activity to be initialize as empty when i clicked the button so i can insert a value. heres a sample https://codesandbox.io/s/activities-qmrbv

cupcave Over a year ago

so when i save the newly added data i can display them. but what i get is [object object] inside the input

cupcave Over a year ago

Hey. Thanks. i already had an answer. i'll be posting it later. sorry fr the trouble.

|

Collectives™ on Stack Overflow

Add dynamically input in vuejs and display data

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related