如何添加 'click' 事件偵聽器或訪問 JSON 中提到的 'ref'

Question

這是我的數據，看起來像這樣：

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);
  },
},

Answer 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>

Answer 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數據只是為了展示我需要的東西，但我實際上需要這個解決方案來處理更復雜的數據和實際項目。