VueJS установил крюк в директиве v-on

VueJS установил крюк в директиве v-on

28.01.2020 11:59:38 Просмотров 20 Источник

Как я могу вызвать метод в VueJS, когда некоторые html-элементы монтируются?

Например:

...
data: [
  {
    items: [
      {text:'item1'},
      {text:'item2'}
    ]
  }
]
methods: function() {
  myMethod: function(a) {
    console.warn(a)
  }
}
template: '<div
             v-for="item in items"
             :key="item.text"
             @hook:mounted="myMethod(item.text + \" mounted\")"
           >{{ item.text }}</div>'
...

Мне нужно получить HTML вот так:

<div>item1</div>
<div>item2</div>

И мне нужно получить 2 предупреждающих сообщения в консоли:

item1 mounted
item2 mounted

Или я могу сделать это другим способом?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59956948/vuejs-mounted-hook-in-v-on-directive#comment106033342_59956948
Я отредактировал свой вопрос.
https://stackoverflow.com/questions/59956948/vuejs-mounted-hook-in-v-on-directive#comment106033501_59956948
Хорошо, я согласен с вами, но как я могу достичь цели в вопросе, не создавая компонент?
https://stackoverflow.com/questions/59956948/vuejs-mounted-hook-in-v-on-directive#comment106033617_59956948
Спасибо. Я новичок в VueJS, и иногда я ищу больше способов сделать это. И я согласен, что это, возможно, немного трудно объяснить кому-то.

Ответы - VueJS установил крюк в директиве v-on / VueJS mounted hook in v-on directive

user1538301

29.01.2020 12:07:11

Ну, синтаксис @hook:mountedдобавляет крюк жизненного цикла к компоненту Vue .

<div></div> это обычный HTML-элемент.. вам нужно добавить mounted()в параметры компонента. Причина@clickработает, а @hook-нет, заключается в том, что HTML-элементы имеют события click; у них нет крючков жизненного цикла компонентов Vue.

Редактировать:, чтобы продемонстрировать, идти вперед и посетить этот Codesandbox, перейдите в App.vueпопробуйте переместить директиву @hook:mountedиз Childкомпонента в div, который ее содержит, и вы заметите, что этот Хук никогда не вызывается, потому divне имеет хуков жизненного цикла

EDIT: также ваш компонент Vue должен выглядеть следующим образом:

mounted: function(a) {
    this.myMethod("Hello, I am mounted!");
},
methods: {
  myMethod(a) { console.warn(a); }
},
template: '<div></div>'
user1538301

29.01.2020 12:36:57

Единственный способ имитировать монтаж компонента на divs-это фактически создать компонент, который является div:

В-Див.вю

<template>
 <div><slot></slot></div>
</template>

Вам нужен <slot>, чтобы вы могли передавать содержимое в <v-div>

Включите V-Div в свой компонент (компонент, который вы создали, а не V-Div.вю)

import VDiv from './components/V-Div.vue';
// ...
{
  data() { return { /* data */} },
  computed: {},
  // other options....
  components: {VDiv}
}

Используйте VDivв шаблоне компонента:

<v-div @hook:mounted="myMethod(item.text + \" mounted\")">{{item.text}}</v-div>

EDIT: я бы не рекомендовал делать это, превращение простого HTML-элемента в компонент Vue только для подписки на жизненные циклы-это пустая трата ресурсов.

Является ответом!
skirtle

29.01.2020 01:21:25

Как уже отмечали другие, hook:mountedдоступно только для компонентов и не срабатывает для HTML-элементов.

Вы можете сделать нечто подобное для элементов, используя пользовательскую директиву. Хотя элемент не может быть "смонтирован", мы все же можем иметь директиву, которая вызывается, когда элемент доступен.

new Vue({
  el: '#app',

  directives: {
    myMountedDirective (el, { value }) {
      console.warn(value + ' mounted')
    }
  },

  data () {
    return {
      items: [
        {text: 'item1'},
        {text: 'item2'}
      ]
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div
    v-for="item in items"
    :key="item.text"
    v-my-mounted-directive="item.text"
  >
    {{ item.text }}
  </div>
</div>

Однако все это очень зависит от дома. Существуют пользовательские директивы, позволяющие вносить изменения в узлы DOM после их существования. Как правило, это неправильный способ решения основной проблемы.

Обычно лучше принимать решения, основываясь на данных, а не на DOM. Поэтому вместо того, чтобы следить за изменениями в DOM, мы можем наблюдать за изменениями в items.

Если вам действительно нужен доступ к узлам DOM (например, для измерения размеров), то вам может быть лучше использовать refs. Вы можете добавить ref, и они будут доступны в виде массива через <div>. updatedи mountedкрючки окружающего компонента обычно являются подходящими местами для реакции на изменения в updated, поскольку все они вызываются сразу после рендеринга.

https://stackoverflow.com/questions/59956948/vuejs-mounted-hook-in-v-on-directive/59957971#comment106054969_59957971
О, в моей ситуации это лучшее решение. Спасибо.
Закрыть X