代码语言：javascript复制
今天解决了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实现过程ref_test($event){
// 通过event 事件获取当前元素的data中绑定的值
var n1=$event.srcElement.dataset.d1
var n2=$event.srcElement.dataset.d2
var n3=$event.srcElement.dataset.d3
// var n4=$event.srcElement.dataset.d4 // 需要获取上一个input里面的值 ，这个方法行不通了
var n4=$event.currentTarget.previousElementSibling.value // 需要获取input里面的值
currentTarget.previousElementSibling 的意思表示为获取当前标签的上一个标签
var n5=$event.srcElement.dataset.d5
}
代码语言：javascript复制这样就解决了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
}
},
