vuejs - define v-model only when object exists

Question

My select box is working fine when the variable item.ativo_retencao.id exists correctly.

<select name="ativo_retencao" v-model="item.ativo_retencao.id" class="form-control m-input">
  <option v-for="ativo in ativos" v-bind:value="ativo.id">@{{ ativo.title }}</option>
</select>

So when it does not exists, I want to not define (or set null) the v-model property.

Is that possible?

And what behavior would it be when you can select an option and the selected option will not be saved at all? — Anatoly
– Anatoly, Commented Nov 4, 2020 at 17:16
@Anatoly Good question. It does not make sense to render select at all in this case...just use v-if — Michal Levý
– Michal Levý, Commented Nov 4, 2020 at 17:33

Carlos Dias · Accepted Answer · 2020-11-04 17:59:47Z

1

you can use an ternary to do this:

<select name="ativo_retencao" :v-model="item.ativo_retencao.id ? item.ativo_retencao.id : ''" class="form-control m-input">
  <option v-for="ativo in ativos" v-bind:value="ativo.id">@{{ ativo.title }}</option>
</select>

edited Nov 4, 2020 at 17:59

answered Nov 4, 2020 at 17:18

Carlos Dias

294 bronze badges

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

3 Comments

anderlaini Over a year ago

it's causing SyntaxError: Unexpected token ','

Michal Levý Over a year ago

I don't think so ....null is not valid "left side" for assigment

Michal Levý Over a year ago

and ''' is not either...try again

tony19 · Accepted Answer · 2022-07-16 00:57:07Z

1

v-model is just syntactic sugar (code below applies just for select element):

v-model="item.ativo_retencao.id"

..is same as

:value="item.ativo_retencao.id" v-on:change="item.ativo_retencao.id = $event.target.value"

...so if you don't have a value you want to bind to, just don't render the select at all

<select v-if="item.ativo_retencao.id" name="ativo_retencao" :v-model="item.ativo_retencao.id" class="form-control m-input">
  <option v-for="ativo in ativos" v-bind:value="ativo.id">@{{ ativo.title }}</option>
</select>

edited Jul 16, 2022 at 0:57

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 4, 2020 at 18:24

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Collectives™ on Stack Overflow

vuejs - define v-model only when object exists

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related