How do I access v-model in vue-class-component

Asked Jan 16 '20 at 13:42

Active Jan 16 '20 at 14:24

Viewed 1,304 times

I want to use the new Vue syntax from https://github.com/vuejs/vue-class-component. Unfortunately, I have trouble accessing the value that's passed with v-model. I can instead declare a @value property to pass the value but that seems a bit inconsistent given that there are a lot of existing uses of v-model in my codebase.

<template>
    <div>
        {{value}}
    </div>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Prop } from "vue-property-decorator"

@Component
export default class Display extends Vue {
    @Prop() value!: string
    // lifecycle hook
    mounted() {alert("The value is " + this.value)}
}
</script>

The current code can be accessed with:

<Display :value="myVar"/>

I'd like to access via:

<Display v-model="myVar"/>

edited Jan 16 '20 at 14:24

asked Jan 16 '20 at 13:42

Christian

25,249
40
134
225

Add your code.. – ljcordero Jan 16 '20 at 13:44
Add the code you have achieved so far and I will be happy to help you. – Diesan Romero Jan 16 '20 at 13:45
What you want to do is, access the value value and change it to your liking without using v-model? – Diesan Romero Jan 16 '20 at 14:05
@DiesanRomero I want to not have to use "@Prop() value!: " but instead access v-model. – Christian Jan 16 '20 at 14:08
1

If you want to access to v-model you need a kind of input. – Diesan Romero Jan 16 '20 at 14:21
@DiesanRomero I added a few additional lines. Is it now clear to you what behavior I expect? – Christian Jan 16 '20 at 14:31
Try with this: https://stackoverflow.com/questions/52472074/vue-how-to-access-v-model-from-child-component – Diesan Romero Jan 16 '20 at 14:51
@DiesanRomero That link is about the old syntax. – Christian Jan 16 '20 at 15:11

How do I access v-model in vue-class-component

0 Answers0