Vue.js 中元素數組的 V 模型

Question

我有以下

<el-row v-for="(position, index) in postForm.positions">
    <el-form-item label="Pages" :prop='"pages" + index'>
        <el-select v-model="postForm.positions[index].pages" v-bind:key="'page' + index" placeholder="Select Site Pages">
            <el-option v-for="page in sitePages" v-bind:key="page.id + index" :label="page.text" :value="page.id" />
        </el-select>
    </el-form-item>
    <el-form-item label="Categories" :prop='"categories" + index'>
        <el-select v-model="postForm.positions[index].categories" v-bind:key="'category' + index" placeholder="Select Categories">
            <el-option v-for="category in categories" v-bind:key="category.id + index" :label="category.translation.name" :value="category.id" />
        </el-select>
    </el-form-item>
    <el-form-item label="Position" prop='"position" + index'>
        <el-select v-model="postForm.positions[index].position" v-bind:key="'position' + index" placeholder="Select Banner Position">
            <el-option v-for="sitePosition in siteBannerPositions" v-bind:key="sitePosition.id + index" :label="sitePosition.text" :value="sitePosition.id" />
        </el-select>
    </el-form-item>
</el-row>

我希望每個位置行都有自己的 v 模式，但是當我連續更改頁面時，其他行中的所有其他頁面以及類別和位置都會更改。

我希望每一行都獨立於其他行。

我有這個：

<el-form-item>
    <el-button type="danger" @click="addPositionRow">+</el-button>
</el-form-item>

這是我的 addPositionRow 方法：

addPositionRow() {
  this.postForm.positions.push(new_position_row)
}

謝謝

Answer 1

最后我找到了解決方案。 我會把它寫下來，以便它可以幫助其他人......我有這個

new_position_row = {
        page: undefined,
        category_id: undefined,
        position: undefined
      }

我每次都把這個對象推到我的 postForm 中。 所以我把這個對象綁定到每一行，就像下面這樣：

  addPositionRow() {
      this.postForm.positions.push(new_position_row)
    }

我需要解決這個問題是在每一行中綁定一個 new_position_row 的新實例，就像這樣：

addPositionRow() {
  const new_position_row = {
    page: undefined,
    category_id: undefined,
    position: undefined
  }
  this.postForm.positions.push(new_position_row)
}

就是這樣