web-dev-qa-db-fra.com

Comment créer un champ de nom d'entrée avec un schéma de variable de chaîne dans Vue Js?

J'utilise VueJs, j'ai besoin d'extraire la variable javascript pour générer des champs cachés.

Mais je dois définir le nom par l'index de la variable.

Je souhaite utiliser un schéma de dénomination en zig-zag.

comme,

 <input type="text" name="segment[{index}][field_name]" :value="{value}">

variable Javascript:

    var test_template = {
                        0: {
                            nb: 2
                        },
                        1: {
                            nb: 1
                        },
                        2: {
                            nb: 4
                        }
                    };

Foreach avec variable pour générer des champs cachés:

    <div v-for="(a,index) in test_template" class="row">            
      <input type="hidden" :name="segment[index][nb]" :value="a.nb">
   </div>

Ici, : nom est une instance dynamique pour accéder aux valeurs vuejs. index est la variable vuejs mais "segment" n'est pas une variable vuejs, c'est en fait une chaîne.

Mais j'ai besoin de ce schéma pour générer un tableau d'entrées.

Est-ce possible ?

Ou y a-t-il d'autres solutions?

Merci d'avance !

javascriptvue.jsvuejs2
12
Shankar Thiyagaraajan

Pour créer des éléments d'entrée avec des noms dynamiques par index, vous pouvez utiliser le + dans une expression JS pour concaténer:

<div v-for="(a,index) in test_template" class="row">            
  <input type="hidden" :name="'segment[' + index + '][nb]'" :value="a.nb">
</div>

Génère:

<input type="hidden" name="section[0][nb]" value="2">
<input type="hidden" name="section[1][nb]" value="1">
<input type="hidden" name="section[2][nb]" value="4">

Voir: https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

30
Jenna Pederson

J'ai rencontré le même problème que vous, et voici comment je l'ai résolu!

faire une méthode comme celle-ci dans votre vue-instance

getInputName(index, dataName){
      return "items["+index+"]["+dataName+"]";
    }

alors vous pouvez l'utiliser comme ceci:

<input v-bind:name="getInputName(index, 'name')" type="text" v-model="item.name">
<input v-bind:name="getInputName(index, 'price')" type="text" v-model="item.price">

qui vous donnera ce résultat de poste:

"items" =>[
    0 =>[
      "name" => "test"
      "price" => "23"
    ],
    1 =>[
      "name" => "jakke"
      "price" => "99,2312"
    ]
]

Et c'est tout...

À la vôtre, Sipman

10
sipman