How to use template inside a form in vue js

Question

I have created a vue instance for the form

var formObject =  new Vue({
    el: '#amount_form',
    data: {
        logdate: '',
        amount:'',
        description:''
    },
      methods: {
        processForm :function(event)
        {
            var data = {"logdate":this.logdate,"amount":parseFloat(this.amount),"description":this.description};
            console.log(data);

            var parameters =
                {
                    "data":data,
                    "url":"save",
                    "type":"post",
                    "data_type":"JSON",
                    "callback":function(data)
                    {
                        alert(data);
                    }
                }
                sendDataToSErver(parameters);
        }
    }
});

i have a template for categories

var categorySelect = Vue.component('category-select',
    {
        data()
        {
            return{
                options:[],
                cat:""
                }},
        template:'<select class="form-control form-control-sm" v-model="cat">' +
            '       <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option></select>',
        created :function()
        {
            var templateObject = this;
            var parameters =
                    {

                        "url":"getCategories",
                        "type":"GET",
                        "async":true,
                        "data_type":"JSON",
                        "callback":function(data)
                        {
                            templateObject.options = data;
                        }
                    }
                sendDataToSErver(parameters);
        }
    });

i am using this template inside the form

    <div class="row">
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="log_date" class="sr-only">Date</label>
                                    <input v-model="logdate" type="datetime-local" id="log_date" class="form-control form-control-sm" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="amount" class="sr-only">Amount</label>
                                    <input v-model="amount"  type="text" class="form-control form-control-sm" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="category" class="sr-only">Category</label>
                                    <category-select></category-select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label  for="description" class="sr-only">Description</label>
                                    <textarea v-model="description" class="form-control" id="description" aria-label="With textarea"></textarea>
                                </div>
                            </div>
                        </div>
                        </form>

Now how can get the value in form.

tony19 · Accepted Answer · 2022-07-16 00:37:11Z

You can emit an event from the child. The parent needs to listen for the custom event and get the data from there. You also need to listen for onChange on your select to emit the event.

The template for categories should be something like this

var categorySelect = Vue.component('category-select',
{
    data()
    {
        return {
            options:[],
            cat:""
        }
    },
    template:'<select class="form-control form-control-sm" v-model="cat" @change="handleUpdateSelectedValue($event)">' +
        '       <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option></select>',
    methods: {
     handleUpdateSelectedValue(event) {
       this.$emit('selectedValue', event.target.value) //emitting the event here
     }
    }
    created :function()
    {
        var templateObject = this;
        var parameters =
                {

                    "url":"getCategories",
                    "type":"GET",
                    "async":true,
                    "data_type":"JSON",
                    "callback":function(data)
                    {
                        templateObject.options = data;
                    }
                }
            sendDataToSErver(parameters);
    }
});

And now you need to listen for the event in the parent

<div class="col-3">
  <div class="form-group">
    <label for="category" class="sr-only">Category</label>
    <category-select @selectedValue="handleSelectedValue"></category-select>
  </div>
</div>

Now, the only thing that remains to do is to define handleSelectedValue in your parent component and do something with that value.

var formObject =  new Vue({
 el: '#amount_form',
 data: {
    logdate: '',
    amount:'',
    description:''
 },
 methods: {
  handleSelectedValue(value) {
  }
 }
 ...

Collectives™ on Stack Overflow

How to use template inside a form in vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related