Get value of v-model inner value

Hello there, I hope everyone is fine!
I’ve been learning many things with this marvelous framework and is great!
During my study about how to create dynamic things I’m trying to read/modify the value of another component.
For instance:
FirstSimpleComponent.vue

<template>
    <vs-input :id="id" :v-model="fsc_"/>
</template>

<script>
    export default {
        name: 'FirstSimple',
        props: { 
            id: {}, 
            fsc_:{}
        }
    }
</script>


SecondSimpleComponent.vue

<template>
        <div>
            <vs-select :id="id" :v-model="ssc_" >
                <vs-select-item :key="item.id" :value="item.text" :text="item.text" v-for="item in items" />
            </vs-select>
        </div>
</template>

<script>
    export default {
        name: 'SecondSimple',
        props: { 
            id: {},
            ssc_:{}
        },
        data: () => ({
            items: [
                {
                    id: '1',
                    text: 'First'
                },{
                    id: '2',
                    text: 'Second'
                },{
                    id: '3',
                    text: 'Third'
                }
            ]
        })
    }
</script>

ValidationComponent.vue

<template>
    <div ref="all">
        <vs-button @click="validate">Validate</vs-button>
    </div> 
</template>
<script>
import FirstSimple from './FirstSimpleComponent.vue'
import SecondSimple from './SecondSimpleComponent.vue'

export default {
    data() {
        return {
            fsc: '',
            ssc: ''
        }
    },
    methods: {
        validate() {
            if (this.fsc === this.ssc) {
               console.log('Same text')
            }

        }
    },
    mounted() {
        var fsComponent = Vue.extend(FirstSimple)
        var fsInstance = new fsComponent({
             propsData: { 
                id: 'fsId',
                fsc_: this.fsc
             }
        })
        fsInstance.$mount()
        this.$refs.all.appendChild(fsInstance.$el)

        var ssComponent = Vue.extend(SecondSimple)
        var ssInstance = new ssComponent({
             propsData: { 
                id: 'ssId',
                ssc_: this.ssc
             }
        })
        ssInstance.$mount()
        this.$refs.all.appendChild(ssInstance.$el)
    }
}

If I pressed the validate button nothing happen, so, my question: is there a way to get the values (fsc_ and ssc_) on ValidationComponent ?

Thanks in advance!

If you’re referencing data values inside the script tag of their own component, you need to reference them using this. So if(this.fsc === this.ssc). The only time you wouldn’t do this is if you’re referencing local variables, say inside a method, and inside the html template.
This should be in get help. Not general discussion

Thx issayah for answering.
Both components are being called from ValidationComponent.vue and each v-model value is passed by props.
There’re 2 things here:

  1. vs-input and vs-select are always erased. Am I passing wrong the v-model from ValidationComponent.vue at the moment when both components are created?
  2. Because of the previous point, vs-input and vs-select are always empty.
    Is there a way to get both v-model values on ValidationComponent.vue?

Oh, you asked for “fsc_ and ssc_” not just the values inside. It was like 1am when I sent that :upside_down_face:
Normally what you would do to send data up is to use the emit() function. It basically creates a custom event handler for an event that you specifically define. You can watch for this in the parent component. In addition, you can also pass in data with emit. So you can watch for, and receive data in a parent.

One option is to have

  <vs-input :id="id" @keydown="emit('inputChange', value)" />
  && (in other component)
  <vs-select :id="id" @change="emit('selectChange', value)" />

Then it would need to be handled in the parent.

(not sure what ref="all" is, never used it...)
<second-simple-component @selectChange="handleSelectChange" />
<first-simple-component @inputChange="handleInputChange />

Then just handle them in methods, it’s usually just setting the data return values to the inputChange value

handleInputChange (value) {
   this.fsc = value
}

Alternatively, you may also be able to use “slots” instead. They’re a simple way to pass up and down information. Though, you can also start passing around functions and things when you start getting advanced enough with them. Though, I can’t help here as I don’t have a huge amount of experience with them.

2 Likes