Vue. js распознавать нажатие кнопки (событие) в модальном режиме. - PullRequest
Новая
       53

Vue. js распознавать нажатие кнопки (событие) в модальном режиме.

1 голос
/ 25 апреля 2020

Я использую это для отображения трех кнопок: 

<button type="submit" class="btn btn-primary float-right" @click.prevent="$emit('close')">Close</button>
<button class="btn btn-primary float-sm-right" style="margin-right:10px" @click.prevent="deleteItem()" >Delete</button>
<button class="btn btn-primary float-sm-right" style="margin-right:10px"  @click.prevent="editItem()" >Edit</button>

Close

Если пользователь нажимает кнопку Закрыть , откроется модальное окно, где пользователь может редактировать информацию. 

showCommentDialog: function(recordNumber) {
  console.log("Show recordNumber: " + recordNumber);
  const self = this;
  this.$modal.show(
    ShowComment,
    {
      commentRecId: recordNumber
    },
    {
      draggable: true,
      width: 400,
      height: 400
    },
    {
      closed: function() { // This is the part I'm referring to
        console.log("editItem works!");
        self.editCommentDialog(recordNumber);
      }
    }
  );
},

enter image description here

Это просто для проверки работоспособности. Я хочу, чтобы это работало, когда пользователь нажимает кнопку Редактировать , но я не могу понять, как.

Я пытался излучать с editItem(): 

editItem(){
  this.$emit('edited', true);
  console.log("message emit from child component!");
}

и изменил 

closed: function() {

на 

edited: function() {

, но это не работает.

Я также попытался использовать 

@click.prevent="$emit('edited')

в кнопка Изменить, но это тоже не работает. Я прочитал пользовательские события, но не смог найти что-то связанное с модальными диалогами.

Я довольно новичок в Vue, поэтому не знаю, как именно можно решить эту проблему. Вот Компонент A , а вот Компонент B .

Любая помощь приветствуется!

...