Question

我试图弄清楚如何将v-for成员和原始事件数据都访问到vue.js中某个事件的绑定函数，但是我一生都无法在文档。

我想要什么：

<div class="card pickup" v-for="pickup in pickups">
        <select v-on:change="locationChanged">

locationChanged在我的vue对象中调用以下方法：

vuePickup = new Vue({
    el: '#pickups',
    data: {
        pickups: pickups,
    },
    methods: {
        locationChanged: (event, pickup) => {
            pickup.newLocation = event.target.value == -1;
        }
    },
});

这需要访问有问题的元素和绑定到v模型那部分的对象。

默认情况下，使用v-on:change="locationChanged"对该事件调用locationChanged，并且可以通过event.target来访问该元素，但是我找不到访问pickup的方法我将特定元素绑定到的对象。

使用v-on:change="locationChanged(pickup)"导致locationChanged被我需要的模型调用，但是随后我丢失了对所讨论的HTML元素的引用。

我最终要做的是在模型本身中设置一个局部函数来转发值：

v-on:change="e => locationChanged(e, pickup)"

为我提供了我需要的信息。

但是，我觉得这不是正确的方法，因为a）我在文档中找不到它，b）它不是最用户友好的。

@Lawless将我引向an existing question的另一个用户，该用户更普遍地想知道如何访问事件（与我访问事件目标的目标（即触发事件的元素）相比），但是我的问题是关于惯用方法的问题仍然存在，因为这是一个非常基本的问题（枚举元素的回调），但是两个解决方案（我的问题和链接的问题）都不是很明显，也没有在vue.js手册中涵盖。

vue.js社区是否更喜欢惯用的方法？

Answer 1

Another question在StackOverflow上（由@Lawless指出）是在问我开始时遇到的相同问题（即，如何在枚举元素的绑定中访问事件数据，而不是与某个关联的事件数据。顶级vue.js对象），提供了另一种更直接的方法（但恕我直言，甚至更神秘）来实现相同的目标。

回顾一下，从由vue.js生成的HTML元素绑定到通过枚举获得的vuejs对象开始

<div class="card pickup" v-for="pickup in pickups">
        <select v-on:change="locationChanged">
            ...
        </select>
</div>

如何访问支持对象（此处为pickup）和对select元素的引用，以便您可以查询其新值并采取相应措施。

我的方法是利用以下事实：默认情况下，vuejs会在事件中传递事实；如果使用lambda在回调中显式提供了本地对象作为参数，则vuejs会抑制事件参数： / p>

<div class="card pickup" v-for="pickup in pickups">
        <select v-on:change="e => locationChanged(e, pickup)">
            ...
        </select>
</div>

以额外的函数调用/间接层为代价，将我感兴趣的元素明确添加到回调中。

The previous answer提供了一种利用显式定义的vuejs $event变量的解决方案，该变量始终转换为本机浏览器事件，除了您希望使用的其他任何变量之外，该变量也可以直接使用捕获，使解决方案如下所示：

<div class="card pickup" v-for="pickup in pickups">
        <select v-on:change="locationChanged($event, pickup)">
            ...
        </select>
</div>

这需要对vuejs有更深入的了解，但要避免封闭。

但是，我一直在搜索，因为它感觉这种解决方案不符合vuejs的精神（而且我所听到的是每个人都对vuejs文档的强大程度感到疯狂，但是这个答案并没有明确提出，而是必须拼凑在一起。）

似乎我正在为一个常见的情况而苦恼：知道我想要什么，但不知道如何到达那里。.以及我以前排除vuejs的领域知识使我在问题中转向了非惯用方法，而不是我<如果我首先从vue.js开始学习前端开发，em>将会解决。

最后，我找到了想要的明显答案，觉得这是正确的“ vuejs方式”，也是对原始问题的惯用解决方案：

问题是我将标准JS / DOM内省与vuejs模型混合在一起，并且在两者之间的过渡（泄漏抽象和全部）之间产生了摩擦。我想要select元素和vuejs对象（pickup）的本机句柄，而当我本应使用的是专门使用vuejs完成我需要的操作时，最终通过绑定{{1 }}元素到vuejs对象/属性，并在绑定的回调中直接引用它：

select

现在<div class="card pickup" v-for="pickup in pickups"> <select v-model:pickup.location v-on:change="locationChanged(pickup)"> ... </select> </div>元素已绑定到我的vuejs模型的select属性，我可以在我的location处理程序和中直接查询其状态/值传递我的locationChanged对象，而无需使用pickup或闭包：

$event

将事件和局部vue变量都传递到绑定函数的惯用方式

1 个答案: