Прикрепление прослушивателя событий keydown к div в contenteditable родительском div не работает?

Question

Вот родительский div:

<div
    id="comment"
    placeholder="Your comment"
    class="form-control ellipsesDropdown"
    contenteditable="true"
    @input="CommentChanged($event)"
> <!-- comments are divided into spans and divs with spans containg normal text and divs containing tags -->
    <span>&#8203;</span>
</div>

Теперь, когда пользователь щелкает тег, я создаю тег следующим образом:

const newTag = document.createElement('div');

newTag.setAttribute("tabindex", "-1");
newTag.style.cssText = "background-color: rgba(29,155,209,0.1); color: #1264a3; display: inline-block; font-weight: bold;";

const tagContent = document.createTextNode(`@${p}`); // imagine p is an input argument 

newTag.append(tagContent);

// attach on key down event listener 
newTag.onkeydown = function(event) {
    console.log(event)                
};

// add tag to the comment div
document.getElementById("comment")!.appendChild(newTag);

Однако я ничего не получаю, когда нажимаю клавиши в теге div события кликов работают. Я взглянул на Как я могу использовать прослушиватель событий keydown на div? и добавил атрибут tabindex.

Я также пробовал прикрепить слушателя событий как:

newTag.addEventListener('keydown', function(event) {
   console.log(event);
});

Но это все равно не работает.

Есть идеи о том, что происходит?

РЕДАКТИРОВАТЬ: По запросу, вот ссылка на коды и ящик: https://codesandbox.io/s/blue-bird-tdidr

РЕДАКТИРОВАТЬ 2: Я добавил больше кода из моего проекта, который в основном реализует в определенной степени то, что я пытаюсь выполнить sh. Подумайте о Twitter / Instagram / Slack: когда вы @someone, когда набираете сообщение, возможно, появятся некоторые параметры для того, кому @, и когда вы щелкаете кого-то, этот «тег» добавляется к вашему сообщению. В примере go впереди и напишите что-нибудь и включите @, вы увидите список открытых опций, щелкните хлеб или тост и увидите, что он стал тегом. То, что я пытаюсь сделать, это добавить EventListener on keydown в тег, чтобы go впереди, и увидеть, что это не работает!

Answer 1

Я вижу, вы хотите создать функцию комментария? Но то, как вы это делаете, это не способ Vue. js. Вот простой пример поля для комментариев:

let el = new Vue({
   el: "#app",
   template: "",
   data(){
      return {
         comment: "",
         comments: []
      }
   },
   methods: {
      addComment(){
         let txt = this.convertTags(this.comment);
         console.log(txt);
         var d = new Date();
         var n = d.toLocaleTimeString();
         this.comments.push({
            commentText: txt,
            time: n
         });
         this.comment = "";
      },
      clickedTag(tag){
       
        console.log(tag);
      },
      convertTags(str){
         let strArr = str.split(" ");
         let mappedArr = strArr.map(el => {
            if(el.includes("@")){
           
               el = `<span onclick='el.clickedTag("${el.replace("@", "")}")' class='tag'>${el}</span>`;
            }
            return " " +el;
         });
         this.template = mappedArr.join("")
         return this.template;
      }
   }
});

#app {
width: 80%;
margin: 0 auto;

}



.comment {
background: #6c5ce7;
width: 100%;
margin: 5px 0;
color: white;
padding: 8px 5px;
}
input {
  margin: 0 auto;
  width: 100%;
   display: block;
   padding: 5px;
}

.tag {
  color: black;
  background: white;
  padding: 2px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="comment in comments" class="comments">
    <div class="comment">
       <p v-html="comment.commentText"></p>
       <small>{{ comment.time }}</small>
    </div>
  </div>
  <input type="text" v-model="comment" @keyup.enter="addComment">
</div>

Answer 2

По-видимому, мне не нужно добавлять прослушиватель событий к добавляемым div. Я могу просто установить для их атрибута contenteditable значение false, поскольку пользователь SleepWalker menstions в своем ответе здесь: Как удалить элемент HTML внутри div с атрибутом contentEditable?

Итак, мой ответ тогда стать:

...
newTag.setAttribute("contenteditable", "false")
document.getElementById("comment")!.appendChild(newTag);

Это позволяет мне удалить тег за один go!