Question

我有一个名为'menu-entry'的自定义组件：

<menu-entry v-for="field in fields" :id:"field.id" :ref="field.id" v-bind:key="field.id" v-bind:class="[classArray]" v-bind:field="field" v-on:clicked="menuEntryClicked">
</menu-entry>

我需要获取其中一个（例如field.id = 2）并从classArray中删除一个项目。这个。$ refs [2]适用于HTML元素，但不适用于自定义元素。这个。$ el.querySelector也不工作。

是否有另一种方法可以从特定元素的classArray中删除一个项目？

Answer 1

您的问题尚不清楚，但您正在尝试将ID设置为field.id，因此遵循此逻辑不需要这样做。

您只需将id发送到您正在执行的方法，如下所示：

<menu-entry 
  v-for="field in fields" 
  v-bind:key="field.id" 
  v-bind:class="[classArray]" 
  v-bind:field="field" 
  v-on:clicked="menuEntryClicked(field.id)" // <= send the id here
  >
</menu-entry>

我不确定我是否有所帮助，但是对于你的问题，现在你可以搞清楚哪个元素的id被点击并从classArray或你想要的任何内容中删除

Answer 2

使用2时，

document.querySelector('#2')不是有效的ID选择器;也许你可以使用document.getElementById('2') - 它可以工作。

Vue.js按id / ref

2 个答案: