Guide on building a Vue Js input name field with string-variable schema

Question

Guide on building a Vue Js input name field with string-variable schema

I have a project using VueJs and I am looking to extract JavaScript variables to create hidden fields.

My goal is to set the name of the field based on the index of the variable, following a zig-zag naming schema.

For example:

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

The JavaScript Variable:

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

Foreach Loop for Generating Hidden Fields with Variables :

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

In this code snippet, :name dynamically accesses VueJS values. index is a VueJS variable, but "segment" is not - it's actually a string.

However, I need this structure to generate an array of inputs.

Is there a way to achieve this?

Or are there any alternative solutions available?

Thank you in advance!

javascript vue.js vuejs2

Answer 1

Answer №1

If you want to dynamically create input elements with unique names based on an index, you can utilize the + operator in a JavaScript expression for concatenation:

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

This will result in the following HTML output:

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

Check out more details at: https://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

Answer 2

If you want to dynamically create input elements with unique names based on an index, you can utilize the + operator in a JavaScript expression for concatenation:

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

This will result in the following HTML output:

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

Check out more details at: https://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

Answer 3

Answer №2

Encountered the same issue but found a solution!

Here's a method you can use within your Vue instance:

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

Then, implement it like this:

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

This will result in:

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

That's all for now.

Cheers, Sipman

Answer 4

Encountered the same issue but found a solution!

Here's a method you can use within your Vue instance:

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

Then, implement it like this:

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

This will result in:

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

That's all for now.

Cheers, Sipman

Guide on building a Vue Js input name field with string-variable schema

Answer №1

Answer №2

Similar questions

Is it possible to transition my Vue.js web application to NativeScript-Vue?

Error in Node Express server: Status code 0 is not valid

The inner workings of Virtual DOM in React and Vue disclosed

Unlock the potential of Stripe's confirmCardSetup method when working with multiple elements in Laravel Cashier integrated with a Vue application. Master

How can I modify the appearance of a slider's range?

What's the best way to include various type dependencies in a TypeScript project?

Tips on expanding the row number column width in jqGrid

Creating a basic jQuery button to switch an element's background color is a breeze

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

Eliminate unnecessary scrollbar from fancybox iframe

Obtaining the image with PHP

Animating range tick movements as the range thumb moves

Is it possible to utilize global variables within CSS properties?

What could be the reason for the "category empty" message appearing at the first index after clicking on the add

Is it possible to configure modules in Nuxt3 without the use of the createApp() function by utilizing the

Tips for customizing the appearance of a single plot within a time series chart using FusionCharts or FusionTime

Utilizing a Single Background Image Across Several Div Elements

An Illustration of Basic Nested Controller within Directive Parameters

The HTML5 video will continue playing indefinitely as long as its readyState remains at 4