Блог

Главная - Вопросы по программированию - Как добавить прослушиватель событий ‘click’ или получить доступ к ‘ref’, который упоминается в JSON

Как добавить прослушиватель событий ‘click’ или получить доступ к ‘ref’, который упоминается в JSON

#javascript #json #vue.js #vuejs2

#javascript #json #vue.js #vuejs2

Вопрос:

Вот мои данные, которые выглядят примерно так:

 cars: [
  {
    id: 1,
    desc: 'Description with <a ref="id1" @click="openModel('my-car')">a link</a> lorem ipsum continues.'
  }, {
    id: 2,
    desc: 'Description without link'
  }, {
    id: 3,
    desc: 'Description with <a ref="id3" @click="openAnotherModel('my-dashboard')">a link</a> lorem ipsum continues.'
  }
]

В моем шаблоне я могу сделать:

 <p v-for="item in cars" v-html="item"></p>

и, конечно, это, безусловно, не сработает:

 <p v-for="item in cars">{{ item }}</p>

Как получить доступ к моим методам / функциям, которые определены в моем экземпляре vue:

 methods: {
  openModel(str) {
    console.log('openModel :>> ', str);
  },
  openAnotherModel(str) {
    console.log('openAnotherModel :>> ', str);
  },
},

Ответ №1:

Отредактировано после комментария.

Вы можете получить доступ к своим ссылкам из подключенных перехватчиков событий, вот так.

 new Vue({
  el: "#app",
  data: {
    cars: [
      {
        id: 1,
        desc: `Description with <a href="my-car">a link</a> lorem ipsum continues.`
      }, {
        id: 2,
        desc: `Description without link`
      }, {
        id: 3,
        desc: `Description with <a href="dash-board">a link</a> lorem ipsum continues.`
      }
    ]
  },
  methods: {
    dispatchLink(e){
      e.preventDefault();
      const target = e.target;
      const str = target.getAttribute('href');
      
      switch(str) {
          case 'my-car':
            this.openModel(str)
            break;
          case 'dash-board':
            this.openAnotherModel(str)
            break;
          // other link type ...
        }
    },
    openModel(str) {
      console.log('openModel :>> ', str);
    },
    openAnotherModel(str) {
      console.log('openAnotherModel :>> ', str);
    }
  },
  mounted(){
      const carsLinks = this.$el.querySelectorAll('p a');
      carsLinks.forEach(link => link.addEventListener('click', this.dispatchLink)       
      )
  }
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p 
    v-for="car in cars" 
    :key="car.id" 
    v-html="car.desc"
    :id="car.id"
  >
  </p>
</div>

Комментарии:

1. Спасибо за попытку, и у меня нет доступа к структуре данных, текст также может появиться после окончания тега ссылки Description with <a ref="id3" @click="openAnotherModel('my-dashboard')">a link</a> lorem ipsum continues. извините! ваше решение не помогло. еще раз спасибо.

2. Я вижу… отредактировал мой ответ соответствующим образом, надеюсь, это поможет.

3. Это всего лишь набор условий (в зависимости от содержимого ссылки href, есть много способов достичь этого, вам решать адаптировать его в соответствии с вашими потребностями… отредактировал мой ответ (добавил функцию отправки и оператор switch)

4. спасибо за ваш ответ, даже я опубликовал свой ответ, на всякий случай, если вам интересно, что у меня получилось 🙂

5. как я уже сказал, «есть много способов достичь этого», и ваше решение лучше всего подходит для вас… Рад, что я помог, удачи 😉

Ответ №2:

Вот что я получил в ответ на вопрос, который я задал. Вместо того, чтобы выяснить, как заставить @click="myFun('myData')" работать, я использовал data-image="myData" 

 <template lang="pug">
  div(ref="cars")
    .row.no-gutters(v-for="(item, index) in cars" :key="index")
      p(v-html="item.desc")
</template>

<script>
export default {
  data() {
    return {
      cars: [
        {
          id: 1,
          desc: 'Some text about <a href="#" onClick="return false;" class="jsOpenImgModal" data-image="/images/dash.png">dash</a> lorem ipsum continues.',
        }, {
          id: 2,
          desc: 'Description without link',
        }, {
          id: 3,
          desc: 'And, Some text about <a href="#" onClick="return false;" class="jsOpenImgModal" data-image="/image/front.png">front</a> lorem ipsum continues.',
        },
      ],
    };
  },

  mounted() {
    const imgModals = this.$refs.cars.querySelectorAll('.jsOpenImgModal');

    Object.keys(imgModals).forEach((i) => {
      const imgUrl = imgModals[i].dataset.image;
      imgModals[i].addEventListener('click', () => this.fnImgModals(imgUrl));
    });
  },

  methods: {
    fnImgModals(imgUrl) {
      console.log('dataset.image :>> ', imgUrl);
    },
  },
};
</script>

Примечание: Немногие из вас могут почувствовать, что это кажется нереалистичной ситуацией
с этим может столкнуться любой разработчик. cars данные, которые я создал
выше просто для демонстрации того, что мне нужно, но мне действительно это было нужно
решение для гораздо более сложных данных и для реального проекта.