Vue.js：无法将md-autocomplete模型绑定到对象数组

Question

我有一个数据网格，其中包含需要更新的字段（列）。完整的数据网格是一个对象数组：

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字段。

https://codepen.io/hanxue/pen/OOLYbv

处的完整运行代码

环境

vue：2.3.4 vue-material：0.7.4

更新1

主持人是否可以建议如何更好地提出这个问题而不是投票？

更新2

链接到正确的代码集https://codepen.io/hanxue/pen/OOLYbv

Answer 1

看起来你需要

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

CodePen

修改
实际上，自动完成功能就像选择而不是自动完成。
添加了一个过滤器以使自动完成工作。