Как на лету использовать ++ переключатели с v-for в VueJS

Друзья, у меня есть форма, которую можно дублировать столько раз, сколько я захочу, как показано выше (только небольшая часть, на самом деле не нужна вся строка):

<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 показывает правильность массивов:

Первый массив данных Vue

Массив previsaoReceitas с двумя объектами

Возврат:

 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"}]

Вы заметили, что только первый массив имеет значения «бальзагема» и «бальзамирование2»?

Это почему? Что я делаю не так? Заранее спасибо!


vue.js radio-button v-for
person Marcello Patto    schedule 11.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно добавить индексы в 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
        });
    }
}
person Rich    schedule 12.07.2019
comment
взгляните на мой вопрос еще раз, пожалуйста! - person Marcello Patto; 12.07.2019
comment
Я думаю, у вас есть ошибка при создании объекта, я сделал рабочий в качестве примера для вас - person Rich; 14.07.2019
comment
Хорошо, я посмотрю глубже, чтобы лучше это узнать. Большое спасибо @Rich! - person Marcello Patto; 15.07.2019