использование v-модели в директиве v-for для создания нового объекта данных - PullRequest
Новая
       7

использование v-модели в директиве v-for для создания нового объекта данных

2 голосов
/ 19 января 2020

Я хотел бы создать объект items с директивой v-for следующим образом: 

<v-row v-for="(item, index) in items" v-bind:key="index">
            <v-col cols="12" md="4">
              <v-autocomplete
                v-model="item.product_uid"
                :items="product_list"
                item-text="[attributes][name]"
                item-value="id"
                label="Product name"
                outlined
              ></v-autocomplete>
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="item.qty"
                label="Quantity"
                outlined
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="item.net_unit_price"
                label="Unit price"
                outlined
              ></v-text-field>
            </v-col>
          </v-row>
          <v-col>
            <v-btn rounded color="primary" dark @click="addItem()">Add</v-btn>
          </v-col>

data () {
      return {
        items: [],
        product_list: [],
      }
    },
    methods: {
      addItem: function () {
        this.items.push({ product_uid: '', qty: '', net_unit_price: '',  });
      }
}

Как получить значение «Цена за единицу» (product_list [attribute] [price] ) на основе выбранного «Наименование продукта» из объекта product_list и затем его добавления в массив новых элементов?

Объект product_list поступает из http-вызова с сервера, и я хотел бы использовать эти данные как значение по умолчанию в форме и - при необходимости - изменение значений и добавление их всех в новый объект элемента.

Большое спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 19 января 2020

Скорее всего, вам следует использовать свойство computed, как указано в документации https://vuejs.org/v2/guide/computed.html.

Также ваш product_list пуст. Прежде чем получить product_list[attributes][price], вы должны добавить что-то к нему или получить отфильтрованный результат с помощью вычисленных свойств или чего-то еще. Кроме того, я не понимаю, что вы пытаетесь сделать с этой строкой кода :items="product_list" Вы пытаетесь установить одно и то же значение для свойства items всех компонентов.

Трудно понять, что именно то, что вы хотите сделать, но, вероятно, вам также понадобятся какие-то методы фильтрации https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter.

0 голосов
/ 19 января 2020

Если я вас правильно понял, вы хотите «автозаполнить» количество и цену за единицу при выборе элемента из списка автозаполнения. Итак, вот образец. Допустим, ваши данные API выглядят так: 

product_list: [
  {product_uid: 1, name: 'name1', qty: 1, net_unit_price: 2},
  {product_uid: 2, name: 'name2', qty: 2, net_unit_price: 3},
  {product_uid: 3, name: 'name3', qty: 3, net_unit_price: 4}
],

Затем удалите v-model и item-value из вашего автозаполнения, и вместо этого добавьте return-object, чтобы мы получили полный объект из автозаполнения для использования , Добавьте событие автозаполнения vuetify change, чтобы мы могли передать выбранный объект и индекс, чтобы мы могли исправить значение в вашем массиве:

Шаблон: 

<v-autocomplete 
  :items="product_list"
  item-text="name" <!-- add correct prop -->
  label="Product name"
  outlined
  return-object <!-- add this and below -->
  @change="setValue(index, $event)"
></v-autocomplete>

Итак, теперь когда элемент выбирается из автозаполнения, мы вызываем setValue и исправляем для него правильные значения: 

setValue: function(index, item) {
  // if you want the complete object, else choose which props you want
  this.$set(this.items, index, { ... item })
}

CODEPEN

...