在VUE JS中使用v-Model中的未知键进行循环

发布于 2025-02-10 01:36:44 字数 960 浏览 0 评论 0原文

我有一个动态的刻面对象。数据的一个示例可能是：

facets: {
    type: ['type1', 'type2', 'type3'],
    color: ['color1', 'color2']
}

我也有一个用于过滤器的空对象。然后，我循环循环，并为每个方面进行复选框组。我希望v-Model是过滤器。“ facet的名称”，SO：filters.type和filters.color。我不知道正手的名字。我尝试在循环中使用钥匙，但这不起作用。

我的循环看起来像这样：

<li v-for="(facet, facetKey, facetIndex) in facets" class="filter-item">
    <strong>{{ facetKey }}</strong>
    <div v-for="(value, valueIndex) in facet" class="form__fieldset" :key="valueIndex">
        <div class="form__field-wrap">
            <input type="checkbox" v-model="filters[facetKey]" :id="value.toLowerCase().trim()" :value="value">
            <label :for="value.toLowerCase().trim()">{{ value }}</label>
        </div>
    </div>
</li>

如果我硬码V模型到filters.type，它将按预期工作。有人实现了这种动态V模型吗？

原文

I have a dynamically made object of facets.
An example of the data could be:

facets: {
    type: ['type1', 'type2', 'type3'],
    color: ['color1', 'color2']
}

I also have an empty object for filters.
I then loop over the facets object and make checkbox groups for each facet. I want the v-model to be filters."name of the facet", so: filters.type and filters.color. I do not know the names forehand. I tried using the key in a loop but that does not work.

My loop looks like this:

<li v-for="(facet, facetKey, facetIndex) in facets" class="filter-item">
    <strong>{{ facetKey }}</strong>
    <div v-for="(value, valueIndex) in facet" class="form__fieldset" :key="valueIndex">
        <div class="form__field-wrap">
            <input type="checkbox" v-model="filters[facetKey]" :id="value.toLowerCase().trim()" :value="value">
            <label :for="value.toLowerCase().trim()">{{ value }}</label>
        </div>
    </div>
</li>

If I hardcode v-model to filters.type, It works as intended. Has anyone achieved this type of dynamic v-models?

分享到QQ

分享到微博