V-модель на массиве элементов в Vue.JS


V-модель на массиве элементов в Vue.JS

05.01.2020 03:15:13 Просмотров 58 Источник

У меня есть следующее

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

Спасибо

У вопроса есть решение - Посмотреть?

Ответы - V-модель на массиве элементов в Vue.JS / V-model on array of elements in Vue.js

Hamidst

06.01.2020 11:31:59

Наконец я нашел решение. Я запишу ее, чтобы она могла помочь кому-то еще ... У меня было это


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

И я каждый раз засовывал этот предмет в свою постформу. Поэтому я привязывал этот объект к каждой строке, как показано ниже:



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

Вот и все

Помочь в развитии проекта:
Закрыть X