web-dev-qa-db-ja.com

Vue Jsで文字列変数スキーマを使用して入力名フィールドを作成する方法は？

私はVueJを使用しています。非表示フィールドを生成するには、JavaScript変数を抽出する必要があります。

しかし、変数のインデックスで名前を設定する必要があります。

ジグザグの名前付けスキーマを使用したい。

お気に入り、

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

Javascript変数：

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

非表示フィールドを生成する変数を使用したForeach：

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

ここで、：nameはvuejs値にアクセスするための動的インスタンスです。 indexはvuejs変数ですが、 "segment"はvuejs変数ではなく、実際には文字列です。

しかし、私は入力の配列を生成するためにこのスキーマが必要です。

これは可能ですか？

または他の解決策はありますか？

前もって感謝します ！

javascriptvue.jsvuejs2
12
Shankar Thiyagaraajan

インデックスによって動的な名前を持つ入力要素を作成するには、+ JS式で連結します。

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

生成：

<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">

参照： https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

30
Jenna Pederson

私はあなたと同じ問題に遭遇しました、そしてここに私がそれをどのように修正したかです！

このようなメソッドをvue-instanceで作成します

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

その後、次のように使用できます。

<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">

これはあなたにこの投稿結果を与えるでしょう：

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

以上です...

乾杯、Sipman

10
sipman