javascript - 如何在单击按钮时使用不同的 v-model 在运行时生成嵌套文本框

我是 vuejs 的新手。我正在尝试在按钮单击事件的运行时生成嵌套文本框。请检查 jsfiddle 链接以获得更好的理解 https://jsfiddle.net/avi_02/qLqvbjvx/

让我们这样假设来理解问题。

++ -> 它生成 MainTextBox

+ -> 它生成 SubTextBox

当我点击 ++ 时，一个新的 MainTextBox 会生成一个 + 链接到 SubTextBox 但是，当我单击 + 生成一个 SubTextBox 时，它会在所有其他 MainTextBox 上生成。

我只想为各自的 MainTextBox 生成 SubTextBox，而不是为其他主文本框生成。请按照 jsfiddle 链接进行视觉理解。

最佳答案

每个 rowsMain 都需要自己的组件数组。

addRowMain() {
  this.form.rowsMain.push({
    key: '',
    value: '',
    componentRows: []
  });
}

然后您可以添加组件行，例如:

addRowMainComponent(index) {
  this.form.rowsMain[index].componentRows.push('')
}

它仍然需要改进，但请参阅更新后的 fiddle :

关于javascript - 如何在单击按钮时使用不同的 v-model 在运行时生成嵌套文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46576828/