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

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>

绑定(bind)失败。设置自动完成值后，我想更新绑定(bind)模型，即上面 shot 数组的相关 staff_name 字段。

完整的运行代码位于 https://codepen.io/hanxue/pen/OOLYbv

环境

vue:2.3.4vue- Material :0.7.4

更新 1

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

更新2

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

Answer 1

看起来你需要

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

CodePen

编辑
实际上，自动完成的作用就像选择而不是自动完成。
添加了一个过滤器以使自动完成工作。