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

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

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

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

处完成 runnabale 代码

环境

vue：2.3.4 vue-材质：0.7.4

更新 1

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

更新 2

Link 到正确的代码笔 https://codepen.io/hanxue/pen/OOLYbv

Answer 1

看来你需要

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

CodePen

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

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

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

javascript

vuejs2

vue-material

环境

更新 1

更新 2