How to bind index to value attribute in vuejs

Question

I want to bind an index to the value attribute of the hidden field. I am trying this:

   <div id="panel" class="panel panel-default mt" v-for="(question,index) in questions.slice().reverse()">
<input type="hidden" v-model="question.question_no" :value="index">
</div>

it is showing me this error:

what is the correct way to bind value attribute with an index?

Why do you need to do this? If question.question_no is not already set you shouldn't be doing it here, or it will already be set to the value you want. Also you should need to use hidden fields as the model will already have the data. — Lawrence Cherone
– Lawrence Cherone, Commented Mar 12, 2018 at 9:08
$question_no is set default to empty in the vue instance. i want to put hidden fields value (which is index) in the $question_no. how this will happen? — Rakesh Kohali
– Rakesh Kohali, Commented Mar 12, 2018 at 10:00

tony19 · Accepted Answer · 2022-07-15 23:59:39Z

2

V-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.

So

<input type="hidden" v-model="question.question_no">

is same as

<input type="hidden" :value="index" @input="question.question_no=$event.target.question.question_no">

So you can't use both the syntax together. Either use first one or second one according to your use case.

Edit

As input type is hidden

<input type="hidden" :value="index"> should be enough.

Reference

edited Jul 15, 2022 at 23:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 12, 2018 at 9:09

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

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

7 Comments

Vamsi Krishna Over a year ago

Since the type of input is hidden it will not be rendered and so cant be edited. So there is no need of two way binding using v-model…+1:-)

Shubham Patel Over a year ago

yeah agreed. I forgot to see the input type. Edited answer. Thanks.

Rakesh Kohali Over a year ago

@ShubhamPatel $question_no is set default to empty in the vue instance. i want to put hidden fields value (which is index) in the $question_no. how this will happen?

Shubham Patel Over a year ago

You meant you need to put this index inside the model. Right?

Shubham Patel Over a year ago

You can't do this using template. what you need to do is after loading the questions data property. Write a function that preprocess the data then returns the processed data.

|

Collectives™ on Stack Overflow

How to bind index to value attribute in vuejs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related