[英]How to add 'click' event listener or access 'ref' that's mentioned in JSON
Here is my data that looks something like this:这是我的数据,看起来像这样:
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.'
}
]
In my template I can do:在我的模板中,我可以:
<p v-for="item in cars" v-html="item"></p>
and of course this certainly not going works:当然这肯定行不通:
<p v-for="item in cars">{{ item }}</p>
How to access my methods/functions that's defined in my vue instance:如何访问在我的 vue 实例中定义的方法/函数:
methods: {
openModel(str) {
console.log('openModel :>> ', str);
},
openAnotherModel(str) {
console.log('openAnotherModel :>> ', str);
},
},
Edited after comment.评论后编辑。
You can access your links from the mounted event hooks, like so.您可以像这样从安装的事件挂钩访问您的链接。
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>
Here is what I ended up with for the question that I have asked.这是我对我提出的问题的最终结果。 Instead of figuring out how to make
@click="myFun('myData')"
work, I used data-image="myData"
我没有弄清楚如何使
@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>
Note: Few of you may feel that this seems like un-realistic situation that any developer can encounter.
注意:很少有人会觉得这似乎是任何开发人员都可能遇到的不切实际的情况。
cars
data that I have created above is just to demonstrate what I need but I actually needed this solution for much more complicated data and for a real project.我在上面创建的
cars
数据只是为了展示我需要的东西,但我实际上需要这个解决方案来处理更复杂的数据和实际项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.