v-model怎么绑定动态添加的对象?

Question

现在有一段代码会报错

<div id="vue-instance">
    <input type="text" v-model="obj.x[0]" />
</div>

var vm = new Vue({
    el: '#vue-instance',
    data: {
        obj: {},
    },
    mounted() {
        Vue.set(this.obj, 'x', [])
        this.obj.x.push(1, 2)
    }
})

想让v-model能访问到动态添加的数组中的值，请问应该怎么修改

Answer 1

<input type="text" v-model="obj.x[0]" v-if="obj.x" />

在obj.x还不存在的时候不要渲染

Answer 2

我猜你报的应该是: 不能读取属性 of undefined(reading '0'), 报这种错是因为vue初始化时, 因为每个对应的属性, 从obj读取的 x 是 undefined, 而undefined[0]肯定报错
你这里在初始obj的时候应该:

obj: {
    x:[]
},

并且将this.obj.x.push(1, 2)放到created中

Answer 3

你的例子里面很明显就是 this.obj 就是一个空对象。所以直接用 this.obj.x[0] 就会报错
，增加一个 v-if 判断就好了，比如说 <input v-if="obj.x" type="text" v-model="obj.x[0]" />

一般来说 Vue2 这样做会比较麻烦，特别是数组的情况下的时候。
所以很多情况下会借助 $set 的修改值并且通知 vue 更新视图。

比如说一个 Element Table 的组件，有编辑功能的，我一般会这样写。

<template>
  <div>
    <el-row type="flex" justify="end" style="margin-bottom:12px">
      <el-button type="primary" size="mini" :loading="loading" @click="onAddRawItem">添加</el-button>
    </el-row>
    <el-table v-loading="loading" class="raw-table" :data="tableData" style="width: 100%" border>
      <el-table-column label="原料" prop="rawName" width="160" align="center">
        <span slot-scope="{row, $index}">
          <el-select v-model="row.rawId" @change="handleRawSelect($event, $index)">
            <el-option v-for="item in rawOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </span>
      </el-table-column>
      <el-table-column label="原料号" prop="rawCode" width="130" align="center" show-overflow-tooltip />
      <el-table-column label="批次号" prop="badBatchNo" width="130" align="center">
        <span slot-scope="{row}">
          <el-input v-model="row.badBatchNo" />
        </span>
      </el-table-column>
      ...
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'RawTableEditor',
  data() {
    return {
      tableData: [],
      rawOptions: [],
      ...
    }
  },
  methods:{
    // 添加原料项
    onAddRawItem() {
      this.tableData.push({ rawId:'', rawCode: '', badBatchNo: '' })
    },
    // 原料被选择
    handleRawSelect(value, index) {
      this.$set(this.tableData[index], 'rawCode', value)
    }
  }
}