Question

如何将多维输入数组从html传递到vue.js，以显示在表的同一页上。我想知道使用这个新框架是否有可能完成某些事情。我可以使用jquery和纯JavaScript完成此操作，但是对于vue.js却一无所知。

在线文章没有帮助，因为它们没有涉及此主题。他们勉强浏览了vue.js中数组的表面，尤其是多维数组。我知道，尽管这个框架是新框架，但没有太多帮助途径。

我敢肯定，你们中有才华的开发人员之一，已经完成了此任务，并将与您共享代码。

示例：

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

Answer 1

您可能会倒想它。与其在HTML中创建数组，不应该在JS中定义它，并且您的HTML以及一些Vue指令将用于修改该数组。

您是否看过list rendering的指南？我想说的是，您需要使用v-for指令，就像使用两个for循环在普通js中遍历2d数组一样。

对于输入，您可能需要在Vue中查看form bindings，然后使用v-model指令将键入到输入中的值与js数组中定义的值同步。

这里唯一的“陷阱”是您必须在数组内使用对象，否则v-model将无法修改源数组的数据。

以下是如何完成所有这些操作的示例。只需在输入框中输入内容，即可在其下方的区域中看到相应的更改。

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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>

传递给vue js的html5输入多维数组

1 个答案: