Question

我尝试创建一个具有动态步数的表单。单击按钮可以添加其他步骤。在该步骤中，有几个input字段，但还需要更多button个字段来创建更多input字段。

例如，有title和description input，但也链接到Add a Video，这会创建另一个input字段并会更改该链接到Remove the Video。

所有这些步骤都必须创建一个对象数组，其中每个对象可能包含稍微不同的属性。我是vue的新人，而且非常令人困惑。

<div v-for="(row, index) in rows" :key="index">

<input type="text" v-model="row.title">
<input type="text" v-model="row.description">
<div v-show="row.video">
    <input type="text" v-model="row.video">
</div>
    <a v-on:click="addVideo(index);" style="cursor: pointer">Add Video element</a><br>

<a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
</div>
<div>
    <button class="button btn-primary" @click="addRow">Add Step</button>
</div>

和我的职能：

addRow () {
  this.rows.push({
    title: '',
    description: '',
    file: {
      name: 'Choose File'
    }
  })
},
addVideo (index) {
  this.rows[index].video = ' '
  this.$forceUpdate()
},
removeElement (index) {
  this.rows.splice(index, 1)
}

或此链接的代码：http://jsbin.com/punekukayu/1/edit?html,js,output

此时我不知道如何删除该步骤中的Add Video element链接，我想这是一种不好的做法。

Answer 1

您可以使用v-if和v-else：

<a v-if="input.video === null" v-on:click="addVideo(index);" style="cursor: pointer">Add Video element</a>
<template v-else>
    <input type="text" v-model="input.video">
    <a v-on:click="removeVideo(index);" style="cursor: pointer">Remove Video element</a>
</template>

默认情况下，您会将video添加为null，因此您无需致电$forceUpdate：

addRow() {
  this.inputs.push({
    one: '',
    two: '',
    video: null                     // added
  })
},
addVideo (index) {
  this.inputs[index].video = '';    // changed
},
removeVideo (index) {
  this.inputs[index].video = null;  // added
},

Updated JSBin here

如果我建议，您应该将每个input直接传递给addVideo或removeVideo（而不是index）。我认为它使代码变得更简单：http://jsbin.com/pucohawuje/1/edit?html,js,output - 但我确实理解这可能是一个品味问题，所以我只是将其作为建议。

包含动态输入字段数的动态行数vue

1 个答案: