Vue.js: Cannot bind md-autocomplete model to array of objects

Question

I have a data grid with a field (column) that needs to be updated. The complete data grid is an array of objects:

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. ',
      }
    ],

The field to be updated is also an array of objects

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

This is the Vue.js table

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

Binding fails to work. When the autocomplete value is set, I want to update the bound model, which is the relevant staff_name field of the shot array above.

Complete runnabale code at https://codepen.io/hanxue/pen/OOLYbv

Environment

vue: 2.3.4 vue-material: 0.7.4

Update 1

Instead of down voting, could moderators suggest how to better ask this question?

Update 2

Link to the correct codepen https://codepen.io/hanxue/pen/OOLYbv

Answer 1

Looks like you need

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

CodePen

Edit
Actually, autocomplete is acting like a select not an autocomplete.
Added a filter to make autocomplete work.