el-input获取焦点问题

Question

循环出多个el-input 点击button相应的input获取焦点报错：提示 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'focus' of undefined" 未定义属性。。。

代码如下：

    <ul>
        <li v-for="(item,index) in itemKey">
          <div class="breadval">
            <el-input
              class="input-new-tag"
              v-if="inputVisible == index"
              v-model="inputValue"
              :ref="'saveTagInput'+index"
              size="small"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+ 新增属性值</el-button>
          </div>
        </li>

      </ul>
      
      js部分：
      showInput(index) {
        this.inputVisible = index;
        this.$nextTick(() => {
          this.$refs['saveTagInput'+index].$refs.input.focus();
        });
      },

如果el-input不放入v-for中的话就能正常(放到li外面正常能使input获得焦点)：

    <ul>
        <li v-for="(item,index) in itemKey">
          <div class="breadval">
            
          </div>
        </li>
        
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增属性值</el-button>
        
      </ul>
      
      
      showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

v-for循环出多个的情况下报错 不知道该怎么处理？求指教

Answer 1

这样改试一下。

showInput(index) {
  this.inputVisible = index;
  this.$nextTick(() => {
    this.$refs['saveTagInput'+index][0].$refs.input.focus();
  });
}