Question

我想在点击时将div变成输入框，以便可以编辑帖子（在循环内渲染）。

这是帖子上的按钮：

<a @click="setFocusEdit(index)" v-if="isAuthor(post)" href="#" >Edit Me</a>

以及相关的div：

<div :ref="'p' + index"  class="post-description">
    {{post.description}}
</div>

方法：

  setFocusEdit(index) {
    console.log('focusing on', index);

    this.$refs['p' + index].focus();
  },

但是我得到这个错误：

Uncaught TypeError: this.$refs[("p" + index)].focus is not a function

我该如何解决？

Answer 1

经过一些调试后，我发现*yes*总是返回包含一个项目的数组，这是您的元素，this.$refs['p' + index]也返回了一个数组，因此尝试访问一个像this.$refs.p0

这样的元素

this.$refs['p' + index][0]

new Vue({
  el: '#app',
  data: function() {
    return {
      posts: [{
          title: "post 1",
          content: "content 1"
        },
        {
          title: "post 2",
          content: "content 2"
        }
      ],

    }
  },

  methods: {
    setFocusEdit(index) {


      this.$refs['p' + index][0].focus();
    }

  },
  mounted() {

  }

})

this。$ refs [（“ p” + index）]。focus不是一个函数

1 个答案: