html5 multidimensional array of inputs passed to vue js

Question

How would one pass multidimensional array of inputs from html to vue.js to be displayed on the same page in a table. I would like to know if it is possible to accomplish something as such using this new framework. I can accomplish this using jquery and pure JavaScript, but i am clueless when it comes to vue.js.

The online articles are not helpful as they do not touch this topic. they barely skimmed the surface of arrays in vue.js, in particular multidimensional. I am aware though that there arn't many avenues of help when it comes to this framework as it is new.

I am certain one of you brilliant developers here, has accomplished this task before and is will to share your code.

example:

<div  id="app">
<input type="text" name="test[0][]">
<input type="text" name="test[0][]">
<input type="text" name="test[1][]">
<input type="text" name="test[1][]">
</div>

tony19 · Accepted Answer · 2022-07-16 03:14:55Z

You might be thinking of it backwards. Rather than creating the array in your HTML, it should be defined in your JS, and your HTML, along with some Vue directives will be used to modify that array.

Have you looked at the guide for list rendering? Off the top of my head I would say that you need to use the v-for directive in the same way you would use a two for loops to iterate through a 2d array in plain js.

For the input you might want to review form bindings in Vue and then use the v-model directive to sync the values typed into your input with the values defined in your js array.

The only 'gotcha' here is that you have to use an object inside the array or else v-model will not be able to modify your source array's data.

Below is an example of how you can accomplish all of this. Just type something into the input box and you should see the corresponding changes in the area below it.

var example1 = new Vue({
  el: '#example',
  data: {
    table: [
      [{value:1}, {value:2}],
      [{value:3}, {value:4}],
    ]
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="example">
  <div id="inputs">
    <div class="input_row" v-for="row in table">
      <input class="input" v-for="col in row" v-model="col.value"/>
    </div>
  </div>
  
  <table id="table">
    <tr v-for="row in table"> 
      <td v-for="col in row">
        {{ col.value }}
      </td>
    </tr>
  </table>
</div>

Collectives™ on Stack Overflow

html5 multidimensional array of inputs passed to vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related