嵌套作用域插槽变量冲突 VueJS答案

【问题标题】：Nested Scoped Slots Variable Collisions VueJS嵌套作用域插槽变量冲突 VueJS
【发布时间】：2023-01-07 03:07:59
【问题描述】：

我已经创建了一个我需要嵌套的简单作用域槽组件，但我正在努力弄清楚如何避免命名冲突。

Vue 组件嵌套字段

<script>
export default {
    props: [ 
        "entityName",
        "items"
    ],
  data: function() {
    return {
        formItems: this.items
    }
  },
  methods: {
    addItem: function() {
        this.items.push({})
    },
    removeItem: function(index) {
        if (this.items[index].id) {
            this.$set(this.items[index], '_destroy', true);
        } else {
            this.items.splice(index, 1);
        }
    }
  }
}
</script>

<template>
    <div class="nested-fields">
        <div v-show="item._destroy !== true || typeof item._destroy == 'undefined'" class="card nested-fields__field-set mb-2" v-for="(item, index) in formItems" :key="index">
            <div class="card-header d-flex justify-content-between">
                <span>Add {{entityName}}</span> <span class="fa fa-times" @click="removeItem(index)"></span>
            </div>
            <div class="card-body">
                <slot name='item-fields' v-bind="{item, index}"></slot>
            </div>
        </div>
        <button class="btn btn-primary btn-xs mb-2" type="button" @click="addItem()">Add {{entityName}}</button>
    </div>
</template>

HTML

    <nested-fields entity-name="Rotap Analysis" :items="[]">
        <template #item-fields="{item, index}"> 
            <div class="form-group col-sm-4">
                <label>
                    Amount (g)
                    <input type="number" min="0" v-model="item.amount_grams" :name="'setup[input_material_attributes][rotap_analysis_attributes]['+index+'][amount_grams]'" class="form-control">
                </label>
            </div>
            <div class="form-group col-sm-4">
            </div>
            <div class="form-group col-sm-4">
            </div>

            <nested-fields entity-name="Sieve" :items="[]">
                <template #item-fields="{item2, index2}">   
                    <label>
                        Sieve Size (US Mesh)
                        <input type="number" min="0" v-model="item2.size_mesh" :name="'setup[input_material_attributes][rotap_analysis_attributes]['+index+'][rotap_sieves]['+index2+'][size_mesh]'" class="form-control">
                    </label>
                </template>
            </nested-fields>
        </template>
    </nested-fields>

我需要重命名此处显示的嵌套模板中的变量：

<nested-fields entity-name="Sieve" :items="item.rotap_sieves || []">
    <!-- this line --><template #item-fields="{item2, index2}">

所以我可以在这里使用它们：

<input type="number" min="0" v-model="item2.size_mesh" :name="'setup[input_material_attributes][rotap_analysis_attributes]['+index+'][rotap_sieves]['+index2+'][size_mesh]'" class="form-control">

... 但是它不允许我将解构重命名为“item”和“index”到“item2”和“index2”。

对于它的价值，我正在尝试替换 Cocoon rails gem 以在我的 Rails 应用程序中嵌套表单，尽管这并不重要。

问题 - 如何重命名嵌套作用域槽中的变量以避免变量冲突？

【问题讨论】：

标签： vue.js

【解决方案1】：

我发现这是一个简单的解构语法解决方案：

<template #item-fields="{item: item2, index: index2}">

按预期完美运行！

【讨论】：