Vue.js自定义指令访问循环的上下文

Question

Vue.directive("custom", {
inserted(el, binding, vnode) {
let val = binding.value;
let arg = binding.arg
let mods = binding.modifiers
let expr = binding.expression
let cont = vnode.context
.... // modify loop
}
})

我正试图在vue中建立一个自定义指令。该指令可以在v-for循环内部或外部激发。当它在v-for循环中触发时，我需要当前迭代的上下文

v-for="item in list"  // i need the context for item

但我不知道如何获得它。即使使用了包括索引的v-版本

v-for="(item, index) in list"  // i need the context for item

在指令插入函数中，这两个值都不可访问。至少我哪儿也找不到它们。

将非常感谢对定位这些值的任何帮助

Answer 1

在binding指令挂钩参数中使用value。

例如，在v-custom="item"中，value将是item。

Vue.directive("custom", {
inserted(el, binding, vnode) {
let val = binding.value; // this value is the item
let arg = binding.arg
let mods = binding.modifiers
let expr = binding.expression
let cont = vnode.context
.... // modify loop
}
})

示例(见日志(：

Vue.directive("custom", {
inserted(el, binding, vnode) {
let val = binding.value;
let arg = binding.arg
let mods = binding.modifiers
let expr = binding.expression
let cont = vnode.context
console.log(val)
}
})
new Vue({
el: "#app",
data: {
todos: [{
text: "Learn JavaScript",
done: false
},
{
text: "Learn Vue",
done: false
},
{
text: "Play around in JSFiddle",
done: true
},
{
text: "Build something awesome",
done: true
}
]
},
methods: {
toggle: function(todo) {
todo.done = !todo.done
}
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos" v-custom="todo">
<label>
<input type="checkbox"
v-on:change="toggle(todo)"
v-bind:checked="todo.done">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>

Answer 2

来源https://v2.vuejs.org/v2/guide/custom-directive.html

指令挂钩传递以下参数：

el：指令绑定到的元素。这可以用于binding：包含以下属性

value：传递给指令的值。例如v-my-directive＝"；1+1"；，则该值将是2。

这里已经有了

let val = binding.value;

你只需要把它传递给指令。

<div v-for="item in list" :v-custom="item"></div>