Vue v-для автофокуса на новой текстовой области - PullRequest
Новая
       15

Vue v-для автофокуса на новой текстовой области

0 голосов
/ 20 декабря 2018

Я делаю блог и хотел бы, чтобы пользователь мог создавать новые текстовые области, когда они нажимают клавишу ввода, и чтобы он автоматически фокусировался на недавно созданной текстовой области.Я пытался использовать атрибут автофокуса, но это не работает.Я также пытался использовать функцию nextTick, но это не работает.Как мне это сделать? 

<div v-for="(value, index) in content">
    <textarea v-model="content[index].value" v-bind:ref="'content-'+index" v-on:keyup.enter="add_content(index)" placeholder="Content" autofocus></textarea>
</div>

и add_content() определяется следующим образом: 

add_content(index) {
    var next = index + 1;
    this.content.splice(next, 0, '');
    //this.$nextTick(() => {this.$refs['content-'+next].contentTextArea.focus()})
}

1 Ответ

0 голосов
/ 20 декабря 2018

Вы находитесь на правильном пути, но this.$refs['content-'+next] возвращает массив, поэтому просто получите доступ к первому и вызовите .focus() для этого 

add_content(index) {
  var next = index + 1;
  this.content.splice(next, 0, {
    value: "Next"
  });
  this.$nextTick(() => {
    this.$refs["content-" + next][0].focus();
  });
}

Рабочий пример 

var app = new Vue({
  el: '#app',
  data() {
    return {
      content: [{
        value: "hello"
      }]
    };
  },
  methods: {
    add_content(index) {
      var next = index + 1;
      this.content.splice(next, 0, {
        value: "Next"
      });
      this.$nextTick(() => {
        this.$refs["content-" + next][0].focus();
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(value, index) in content">
    <textarea v-model="content[index].value" v-bind:ref="'content-' + index" v-on:keyup.enter="add_content(index);" placeholder="Content" autofocus></textarea>
  </div>
</div>

Кроме того, ваше значение в массиве представляется скорее объектом, чем строкой, поэтому splice в объекте, а не пустой строкой

...