this.$refs[(“p” + index)].focus is not a function

Question

I\'d like to turn a div into input box on click, so that the post (which is rendered inside a loop) can be edited.

Here is the button on the post:

Answer 1

After some debugging i found that this.$refs['p' + index] returns always an array containing one item which is your element, this.$refs.p0 returns also an array, so to deal with that try to access the one element like 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() {

  }

})

  

          {{post.content}}
    
    Edit Me