0

As we know v-model is two way binding. Which means it's combination of V-bind and maybe another attribute which I'm looking for and it updates the data. I have a input which it's value is sometimes custom and sometimes should be read from config based on another parameters. What I need is an input with a v-bind:value/:value and another for update. I know I can do it with @change and a custom method But I'm looking for something easy, Bottom line is I want V-model without doing v-bind ! Thank You

EDIT: I did it with two input using v-if .

<input type="number" class="item-input"  v-if="setting.keto_program=='custom'" id="protein_per_kilo" v-model="setting.keto_program_protein_density">
 <input type="number" class="item-input"  v-else disabled id="protein_per_kilo" :value="config.keto_programs[setting.keto_program].protein_density">

Anyway doing this using just one input feels better. Thanks

Vahid2023
  • 863
  • 3
  • 11
  • 33
  • 1
    imo, if its a bunch of fields all based upon `setting.keto_program` being custom, make a component and pass 2 props, `:editable="setting.keto_program === 'custom'"`, `:model="setting.keto_program === 'custom' ? setting : config.keto_programs[setting.keto_program]"` then its done on component level so your only have one set of fields. – Lawrence Cherone Jul 06 '21 at 06:14

1 Answers1

1

May be you can use computed hook.

computed:{
  yourVariable(){
    return someVariable/computation
  }  
}

you can use yourVariable inside your code that will act like v-model without doing v-bind.

yourVariable will be updated as soon as the variables of the return statement of this be changed or updated

Edited:

part of v-model for input tag

<input
   v-bind:value="variable"
   v-on:input="variable = $event.target.value"
>

or

<input
   :value="variable"
   @input="variable = $event.target.value"
>

found this via Vue.js—Difference between v-model and v-bind

Shamsail
  • 612
  • 6
  • 17
  • Thank You, But this is not what I'm looking for – Vahid2023 Jul 06 '21 at 05:52
  • 1
    Can you elaborate it ? may be you can use conditions in your computed property based on your "sometimes custom and sometimes should be read from config based on other parameters" – Shamsail Jul 06 '21 at 05:59
  • 1
    I have updated the answer according to your requirement. may be it's what you are looking for. may be it will help for your logic – Shamsail Jul 06 '21 at 06:30