解决django 和 vue 渲染冲突问题 event

今天解决了django 和vue 同时渲染冲突的问题，
需求是这样的，后端取回对象列表由django模板渲染，取回后的列表大概是这样的

1    2    3     4
2    2    3     4
3    2    3     4
4    2    3     4
.    .    .     .

每一行渲染的东西都是不同的数据）
其中我遇到的难题就是 因为我是用django + vue 混合渲染
所以他们两的渲染标签对天生就是冲突的，vue也没法直接访问django渲染列表对象里的值，所以就有了这个问题
简单来说就是 我用django渲染的列表   需要用vue 去捕捉我当前点击的对象是什么，需要拿到切确的对象值，然后
做下一步处理，
起初的处理方案我是想直接用引擎模板通过参数传递的方式传入到vue的方法中
结果是 vue 没法直接捕获到django模板传入的参数，显示为 object undefined
它们长这样   @click='get_value({{value}})'  value 是django渲染的值

这是我用的方法，思考了一阵子后发现这个方法并不可行，所以用了第二种方法

那就是在 4row 中加入了一个a标签，a标签用data的方式绑定django模板渲染出来的结果，它们长这样

{% for value in items %}
<a data-d1="{{value.d1}}" data-d2="{{value.d2}}">data用event事件捕捉当前点击获取</a>

{% endfor %}
大概就是这样子的
通过data自定义属性为a标签绑定上不好获取的值，每一次循环都是不同的值，我们通过event来判断点击的是哪次循环
然后在通过event事件里面的srcElement.dataset  获取到绑定的值即可

下面是js实现过程

这样就解决了django 和vue同时渲染冲突问题，

下面为参考代码

<p @click = “clickfun($event)”>点击</p>

methods: {
clickfun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
    #获得点击元素的前一个元素
    e.currentTarget.previousElementSibling.innerHTML
    #获得点击元素的第一个子元素
    e.currentTarget.firstElementChild
    # 获得点击元素的下一个元素
    e.currentTarget.nextElementSibling
    # 获得点击元素中id为string的元素
    e.currentTarget.getElementById("string")
    # 获得点击元素的string属性
    e.currentTarget.getAttributeNode('string')
    # 获得点击元素的父级元素
    e.currentTarget.parentElement
    # 获得点击元素的前一个元素的第一个子元素的HTML值
    e.currentTarget.previousElementSibling.firstElementChild.innerHTML
  
    }
        },