Как + + + радио кнопки с V-For в VueJS на лету - PullRequest
Новая
       45

Как + + + радио кнопки с V-For в VueJS на лету

0 голосов
/ 11 июля 2019

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

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

The first Vue data array

The previsaoReceitas array with two objects

Возврат: 

 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'?

Почему это так?Что я делаю не так?Заранее благодарен!

1 Ответ

1 голос
/ 12 июля 2019

Вам нужно добавить индексы в v-модель, id и в вашем шаблоне, чтобы убедиться, что все они уникальны: 

<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
        });
    }
}
...