CODEWITHSUNDEEP
javascriptvue.js
Minde
Minde

Reputation: 29

Input-fields as components with updating data on parent

I'm trying to make a set of components for repetitive use. The components I'm looking to create are various form fields like text, checkbox and so on.

I have all the data in data on my parent vue object, and want that to be the one truth also after the user changes values in those fields.

I know how to use props to pass the data to the component, and emits to pass them back up again. However I want to avoid having to write a new "method" in my parent object for every component I add.

<div class="vue-parent">
  <vuefield-checkbox :vmodel="someObject.active" label="Some object active" @value-changed="valueChanged"></vuefield-checkbox>
</div>

My component is something like:

Vue.component('vuefield-checkbox',{
    props: ['vmodel', 'label'],
    data(){
        return {
            value: this.vmodel
        }
    },
    template:`<div class="form-field form-field-checkbox">
                <div class="form-group">
                    <label>
                        <input type="checkbox" v-model="value" @change="$emit('value-changed', value)">
                        {{label}}
                    </label>
                </div>
            </div>`
});

I have this Vue object:

var vueObject= new Vue({
    el: '.vue-parent',
    data:{
        someNumber:0,
        someBoolean:false,
        anotherBoolean: true,
        someObject:{
            name:'My object',
            active:false
        },
        imageAd: {

        }
    },
    methods: {
        valueChange: function (newVal) {
            this.carouselAd.autoOrder = newVal;
        }
    }
});

See this jsfiddle to see example: JsFiddle

The jsfiddle is a working example using a hard-coded method to set one specific value. I'd like to eighter write everything inline where i use the component, or write a generic method to update the parents data. Is this possible?

Upvotes: 2

Views: 81

Answers (2)

ndpu
ndpu

Reputation: 22561

As an addition to Gudradain answer - v-model field and event can be customized:

From here: https://v2.vuejs.org/v2/guide/components.html#Customizing-Component-v-model

By default, v-model on a component uses value as the prop and input as the event, but some input types such as checkboxes and radio buttons may want to use the value prop for a different purpose. Using the model option can avoid the conflict in such cases:

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    // this allows using the `value` prop for a different purpose
    value: String
  },
  // ...
})


<my-checkbox v-model="foo" value="some value"></my-checkbox>

The above will be equivalent to:

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

Upvotes: 0

Gudradain
Gudradain

Reputation: 4753

You can use v-model on your component.

When using v-model on a component, it will bind to the property value and it will update on input event.

HTML

<div class="vue-parent">
  <vuefield-checkbox v-model="someObject.active" label="Some object active"></vuefield-checkbox>

  <p>Parents someObject.active: {{someObject.active}}</p>
</div>

Javascript

Vue.component('vuefield-checkbox',{
    props: ['value', 'label'],
    data(){
        return {
            innerValue: this.value
        }
    },
    template:`<div class="form-field form-field-checkbox">
                <div class="form-group">
                    <label>
                        <input type="checkbox" v-model="innerValue" @change="$emit('input', innerValue)">
                        {{label}}
                    </label>
                </div>
            </div>`
});

var vueObject= new Vue({
    el: '.vue-parent',
    data:{
        someNumber:0,
        someBoolean:false,
        anotherBoolean: true,
        someObject:{
            name:'My object',
            active:false
        },
        imageAd: {

        }
    }
});

Example fiddle: https://jsfiddle.net/hqb6ufwr/2/

Upvotes: 1

Related Questions