现在有一段代码会报错 <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 能访问到动态添加的数组中的值,请问应该怎么修改
我猜你报的应该是: 不能读取属性 of undefined(reading '0'), 报这种错是因为vue初始化时, 因为每个对应的属性, 从obj读取的 x 是 undefined, 而 undefined[0] 肯定报错 你这里在初始obj的时候应该: obj: { }, 并且将 this.obj.x.push(1, 2) 放到created中
你的例子里面很明显就是 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> <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> </template> <script> export default { name: 'RawTableEditor', data() { return { tableData: [], rawOptions: [], methods:{ // 添加原料项 onAddRawItem() { this.tableData.push({ rawId:'', rawCode: '', badBatchNo: '' })