[Vuejs]-Set v-model to be a key in array (v-model.key="someArray")

by

0👍

To answer your specific question, v-model will bind to one key value pair, you don’t need to assign the Key.

The way you structured your input binding The Input box will bind the object to your value field and you’ll see [Object object] in the input box.

I created this jsfiddle that shows you how to bind to the model. I assumed your data is modeled in this list format below. 

attributes: [
    {checkboxes: [1], strings: { keys: [1], values: ['tomato'] }},
    {checkboxes: [2], strings: { keys: [2], values: ['potato'] }}
]

I also offered you a json object to watch the data update for each of these two keys. This will help you in debugging where you are actually trying to go.

JSFiddle doesn’t have a way to render laravel blade, so here is the blade version:

<input v-for="attribute in attributes" type="hidden" v-model="attribute.strings.values" value="1">
{!! Form::text('bam', null, ['v-for' => 'attribute in attributes', 'class' => 'form-control', 'placeholder' => 'boom', 
        'v-model' => 'attribute.strings.values']) !!}

If, as you mention at the beginning of your question, you are looking to create a filter (I assume an autocomplete type object?), this wouldn’t be the way to do it.

Hope this helps.

👤Dom DaFonte

0👍

Sorry for my bad explanation guys but i finally found a solution,

what I meant was that i needed to know in a big list of inputs, which value was asociated to each input and the best way to do it is this one: 

v-model="{{ 'filtres.transaccions["'.$atribut->tag.'"]' }}"

(in case you render with blade)

data: { 
  filtres: {
    transaccions: {}
  }
}

because this way you get this:

this.filtres.transaccions.someInputKey: SomeInputValue

In which the key would be given by the $atribut->tag and the value of course would be given by the input itself

👤Neku80

Leave a comment