Back

v-model not working in multi dimentional array


Robert Dunne posted 4 months ago

Hi Guys,

So i am trying to get v-model to work in a loop for a multi dimensional object.

The bit that i am looking at is

<div class="row" v-for="item in recipeConcs" v-cloak>
                                <span>
                                    <span class="col-md-6">
                                        (@{{ item.brand }}) @{{ item.name }}
                                    </span>
                                    <span class="col-md-6">
                                        <input type="text" v-model="item.name">
                                    </span>
                                </span>
                            </div>

Here is my code.

Recipe.vue

<script>
    export default {
        data() {
            return {
                name: null,
                amount: null,
                strength: null,
                vg_perc: null,
                pg_perc: null,
                nic_vg: null,
                nic_pg: null,
                nic_strength: null,
                notes: null,
                searching: false,
                term: '',
                min: 2,
                concs: [],
                recipeConcs: {}
            };
        },
        methods: {
            recipe() {
                if(this.term.length >= this.min) {
                    this.searching = true;
                    axios.get('/recipe/conc/' + this.term)
                        .then(response =>
                            this.concs = response.data
                        );
                } else {
                    this.searching = false;
                    this.concs = [];
                }
            },

            add(id, brand, name) {
                this.recipeConcs[id] = {
                    id: id,
                    brand: brand,
                    name: name,
                    perc: 0
                }
                this.searching = false;
                this.term = '';
            },

            create() {
                console.log('created clicked');
            },

            update(id) {
                console.log(id);
            }
        }
    }
</script>

create.blade.php

@extends('layouts.app')

@section('content')
    <recipe inline-template>
        <div class="container">
                <legend>
                    <div class="form-group">
                        <input type="text" class="form-control" v-model="name" placeholder="Recipe Name">
                    </div>
                </legend>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="amount" class="col-sm-2">Amount to Make</label>
                            <div class="input-group col-sm-10">
                                <input type="number" class="form-control" v-model="amount" id="amount" placeholder="Amount">
                                <div class="input-group-addon">ml</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="strength" class="col-sm-2">Strength</label>
                            <div class="input-group col-sm-10">
                                <input type="number" class="form-control" v-model="strength" id="strength" placeholder="Strength">
                                <div class="input-group-addon">mg</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="vg_perc" class="col-sm-2">Desired VG %</label>
                            <div class="input-group col-sm-10">
                                <input type="number" class="form-control" v-model="vg_perc" id="vg_perc" placeholder="VG">
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="pg_perc" class="col-sm-2">Desired PG %</label>
                            <div class="input-group col-sm-10">
                                <input type="number" class="form-control" v-model="pg_perc" id="pg_perc" placeholder="PG">
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <label for="nic_strength" class="col-sm-2">Nicotine Strength</label>
                    <div class="input-group col-sm-10">
                        <input type="number" class="form-control" v-model="nic_strength" id="nic_strength" placeholder="Nic Strength">
                        <div class="input-group-addon">mg</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nic_vg" class="col-sm-2">Nic VG</label>
                            <div class="input-group col-sm-10">
                                <input type="number" class="form-control" v-model="nic_vg" id="nic_vg" placeholder="Nic Strength">
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nic_pg" class="col-sm-2">Nic PG</label>
                            <div class="input-group col-sm-10">
                                <input type="number" class="form-control" v-model="nic_pg" id="nic_pg" placeholder="Nic Strength">
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>

                    <div class="row">
                        <h3 class="page-header">Add Concentrates to your recipe</h3>
                        <div class="col-md-6">
                            <div class="row" v-for="item in recipeConcs" v-cloak>
                                <span>
                                    <span class="col-md-6">
                                        (@{{ item.brand }}) @{{ item.name }}
                                    </span>
                                    <span class="col-md-6">
                                        <input type="text" v-model="item.name">
                                    </span>
                                </span>
                            </div>
                            <span>
                                <input type="text" @keyup="recipe" v-model="term">
                            </span>
                            <span v-if="searching">
                            <ul>
                                <li v-for="conc in concs">
                                    <a @click='add(conc.id, conc.brand, conc.name)'>(@{{ conc.brand }}) @{{ conc.name }}</a>
                                </li>
                            </ul>
                        </span>
                        </div>
                        <div class="col-md-6">

                        </div>
                    </div>
                <?php
                //$i = 0;
                ?>
                {{[email protected]($concs as $conc)--}}
                  <?php //$i++; ?>
                    {{--<div class="row">--}}
                        {{--<div class="col-md-4">--}}
                            {{--<div class="checkbox">--}}
                                {{--<label>--}}
                                    {{--<input type="checkbox" name="concs[{{$i}}]" value="{{$conc->id}}"> ({{$conc->brand}}) {{$conc->name}}--}}
                                {{--</label>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="col-md-8">--}}
                            {{--<div class="form-group">--}}
                                {{--<div class="input-group">--}}
                                    {{--<input type="number" class="form-control" name="concs[{{$i}}][conc_perc]" id="nic_pg" placeholder="Conc Perc">--}}
                                    {{--<div class="input-group-addon">%</div>--}}
                                {{--</div>--}}
                                {{--<div class="radio">--}}
                                    {{--<label>--}}
                                        {{--<input type="radio" name="concs[{{$i}}][conc_pg]" id="optionsRadios1" value="pg" checked>--}}
                                        {{--PG base--}}
                                    {{--</label>--}}
                                {{--</div>--}}
                                {{--<div class="radio">--}}
                                    {{--<label>--}}
                                        {{--<input type="radio" name="concs[{{$i}}][conc_pg]" id="optionsRadios2" value="vg">--}}
                                        {{--VG base--}}
                                    {{--</label>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{[email protected]}}
                <div class="form-group">
                    <label for="notes" class="col-sm-2 control-label">Notes</label>
                    <div class="col-sm-10">
                        <textarea v-model="notes" class="form-control" id="notes" rows="7"></textarea>
                    </div>
                </div>
                <button class="btn btn-primary" @click="create()">Make Recipe</button>
        </div>
    </recipe>

    @endsection

Sign in to participate in this thread!



We'd like to thank these amazing companies for supporting us