如何在 VueJS 中动态使用 v-for ++ 单选按钮

Question

朋友们，我有一个可以复制任意多次的表格，如上所示（只是一小部分，并不真的需要所有行）：

<div class="col-sm-2">
    <div class="form-group">
        <label for="produtividade">Produtividade p/ha</label>

        <input
            type="text"
            class="form-control"
            name="previsaoReceitas[][produtividade]"
            v-model="previsaoReceita.produtividade"
            class="form-group"
            @keydown="$event.keyCode === 13 ? $event.preventDefault() : false"
        >
    </div>

    <div class="form-check form-check-inline">
        <input
            class="form-check-input"
            type="radio"
            name="previsaoReceitas[][embalagem]"
            v-model="previsaoReceita.embalagem"
            value="sc"
        >

        <label class="form-check-label" for="produtividade1">sc</label>
    </div>

    <div class="form-check form-check-inline">
        <input
            class="form-check-input"
            type="radio"
            name="previsaoReceitas[][embalagem]"
            v-model="previsaoReceita.embalagem"
            value="cx"
        >

        <label class="form-check-label" for="produtividade2">cx</label>
    </div>

    <div class="form-check form-check-inline">
        <input
            class="form-check-input"
            type="radio" name="previsaoReceitas[][embalagem]"
            v-model="previsaoReceita.embalagem"
            value="ton"
        >

        <label class="form-check-label" for="produtividade3">ton</label>
    </div>
</div>

有一个“+”按钮调用一个方法来复制这一行，推送到一个数组，这样我就可以得到 v-for:

<div v-for="(previsaoReceita, index) in previsaoReceitas">

问题是当行重复时，单选按钮获得相同的名称，然后新的使旧的失效，当然。

如何让 Vue 即时命名新的单选按钮？

我希望我说清楚了。提前致谢！

亲爱的@Rich，现在我得到了一个奇怪的结果，看看这个：

在 Vue 数据部分：

previsaoReceita: {
                anoSafra: '',
                cultura: '',
                areaCultivada: '',
                produtividade: '',
                embalagem: '',
                preco: '',
                embalagem2: '',
                valor_previsto: ''
            },

Vue 检查器显示数组正确：

return:

 if ($request->previsaoReceitas != '') {
            $j = json_encode($request->previsaoReceitas);
            $im = str_replace('},{', ',', $j);
            $i = str_replace('","anoSafra', '"}, {"anoSafra', $im);
            return $i;
            $previsaoReceitas = new Producao();
            $previsaoReceitas->consorciado_id = $consorciado->id;
            $previsaoReceitas->producaos = $i;
            $previsaoReceitas->save();
        }

在浏览器上：

[{"anoSafra":"2016","embalagem":"cx","embalagem2":"sc","cultura":"batata","embalagem":"ton","embalagem2":"sc","areaCultivada":"100","produtividade":"100","embalagem":"sc","preco":"0.25","embalagem2":"sc"}, {"anoSafra":"2017","cultura":"batata","areaCultivada":"420","produtividade":"550"}, {"anoSafra":"2018","cultura":"batata","areaCultivada":"500","produtividade":"550"}]

您是否注意到只有第一个数组具有 'embalagem' 和 'embalagem2' 值？

这是为什么？我做错了什么？提前致谢！

Answer 1

您需要将索引添加到模板中的 v-model、id 和 for 中，以确保它们都是唯一的：

<div
    v-for="(previsaoReceita, index) in previsaoReceitas"
    class="form-check form-check-inline"
>
    <input
        :id="`produtividade-1-${index}`"
        class="form-check-input"
        type="radio"
        :name="`previsaoReceitas[${index}][embalagem]`"
        v-model="previsaoReceita[index].embalagem"
        value="sc"
    >

    <label
        :for="`produtividade-1-${index}`"
        class="form-check-label"
    >sc</label>
</div>

确保你的 previsaoReceitas 数组能够处理索引，我不确定你的数据或添加方法是什么样的，但它应该是这样的：

data() {
    return {
        previsaoReceitas: [
            {
                embalagem: null
            }
        ]
    };
},

methods: {
    add() {
        this.previsaoReceitas.push({
            embalagem: null
        });
    }
}

如何在 VueJS 中动态使用 v-for ++ 单选按钮

How to ++ radio buttons with v-for in VueJS on the fly

radio-button

vue.js

v-for