Vue.js: невозможно привязать модель md-autocomplete к массиву объектов

У меня есть сетка данных с полем (столбцом), которое нужно обновить. Полная сетка данных представляет собой массив объектов:

shot: [
      {
        shot_name: 'Project_001_0150',
        status: 'SupervisorHold',
        artist: 'mark',
        description: '',
        note: 'Lorem ipsum dolor sit amet, purto albucius eu pro. An inimicus consulatu ius, eum at facete epicurei detraxit. Has cu debitis voluptatum delicatissimi. An veri tractatos duo. ',
      },
      {
        shot_name: 'Project_001_0160',
        status: 'Submit',
        artist: 'jimbob',
        description: ' ah',
        note: 'Ut vis fabulas eligendi, omnes philosophia id pri. Ut eum animal aliquip atomorum, in possim equidem copiosae sea, nec id exerci impedit fuisset. Ludus ullamcorper eam te. Dicunt consectetuer eos eu, ad sit maiorum erroribus molestiae, purto duis pericula pro eu. ',
      },
      {
        shot_name: 'Project_001_0190',
        status: 'SupervisorHold',
        artist: null,
        note: 'nothing',
        description: ' Duo an mutat aperiam, mazim errem suscipit ex nam, sea in harum oratio aliquid. Nam cibo disputando te, probo elaboraret mel cu. Dicta dictas malorum nam ex, duo ad brute causae consetetur. An sale civibus incorrupte has, adhuc affert doctus vis at. Eum graecis qualisque id, ne pri menandri platonem. Mea idque expetendis voluptatibus ea, nibh cetero voluptua eam id. ',
      },
      {
        shot_name: 'Project_001_0370',
        status: 'Submit',
        artist: 'jimbob',
        description: ' n',
        note: 'Ut vis fabulas eligendi, omnes philosophia id pri. Ut eum animal aliquip atomorum, in possim equidem copiosae sea, nec id exerci impedit fuisset. Ludus ullamcorper eam te. Dicunt consectetuer eos eu, ad sit maiorum erroribus molestiae, purto duis pericula pro eu. ',
      },
      {
        shot_name: 'Project_001_0590',
        status: 'SupervisorHold',
        artist: null,
        description: '',
        note: 'Ut vis fabulas eligendi, omnes philosophia id pri. Ut eum animal aliquip atomorum, in possim equidem copiosae sea, nec id exerci impedit fuisset. Ludus ullamcorper eam te. Dicunt consectetuer eos eu, ad sit maiorum erroribus molestiae, purto duis pericula pro eu. ',
      }
    ],

Обновляемое поле также является массивом объектов.

artistList: [{
    "staff_id": 1,
    "staff_name": "jimbob"
}, {
    "staff_id": 2,
    "staff_name": "mark"
}, {
    "staff_id": 3,
    "staff_name": "jean"
}]

Это таблица Vue.js

<md-table-body>
          <md-table-row v-for="(row, rowIndex) in shot" :key="rowIndex" :md-item="row">
            <md-table-cell v-for="(column, columnIndex, i) in row" :key="columnIndex">

                <md-input-container v-if="columnIndex === 'artist'">

                  <label>Type to select Artist</label>
                  <md-autocomplete v-model="shot[i].staff_name"
                        :name="'artist' + i"
                        :id="'artist' + i"
                        :list="artistList"
                        print-attribute="staff_name"
                        :max-height="10"
                        :debounce="500">
                  </md-autocomplete>
                </md-input-container>

                <span v-if="columnIndex !== 'artist'">{{ column }}</span>
            </md-table-cell>
          </md-table-row>
        </md-table-body>

Привязка не работает. Когда установлено значение автозаполнения, я хочу обновить связанную модель, которая является соответствующим полем staff_name массива shot выше.

Полный код runnabale на https://codepen.io/hanxue/pen/OOLYbv

Среда

vue: 2.3.4 vue-material: 0.7.4

Обновление 1

Могут ли модераторы вместо голосования "против" предложить, как лучше задать этот вопрос?

Обновление 2

Ссылка на правильный кодовый код https://codepen.io/hanxue/pen/OOLYbv


javascript vuejs2 vue-material
person Hanxue    schedule 27.10.2017    source источник
comment
Я не голосовал против вас, а просто указал на то, что вы, возможно, упомянули неправильный CodePen в своем вопросе. В нем нет вашего кода, приведенного выше, и я попытался вставить его, но не смог получить что-то пригодное для использования, поэтому предполагаю, что другие тоже потратили на это бесплодное время.   -  person Richard Matsen    schedule 28.10.2017
comment
@RichardMatsen, спасибо! Забыл форк шаблона после редактирования. Теперь связан с правильным кодом.   -  person Hanxue    schedule 28.10.2017
comment
Ура, намного лучше! Посмотрим, сможем ли мы заставить его работать.   -  person Richard Matsen    schedule 28.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, тебе нужно

<md-autocomplete v-model="row.artist"

CodePen

Изменить
На самом деле автозаполнение действует как выбор, а не автозаполнение.
Добавлен фильтр, чтобы автозаполнение работало.

person Richard Matsen    schedule 28.10.2017