I am looking to develop a custom component in Vue CLI that allows me to utilize v-model for passing a value or object to the component. With v-model binding, I can update the passed value in the parent component by either checking a checkbox or clicking a button to set the value to true.
Here's how it would look in the app code:
<test v-model="content"></test>
<br />
selected: {{content}}
The Test component is structured as follows:
<template>
<div>
<v-text-field label="Regular" v-model="checkval" disabled></v-text-field>
<input
type="checkbox"
v-bind:checked="checkval"
v-on:change="$emit('change', $event.target.checked)"
/>
<v-btn @click="$emit('change', true)">Make true</v-btn>
</div>
</template>
<script lang="ts">
import { Component, Vue, Model, Prop } from "vue-property-decorator";
@Component({
model: {
prop: "checkval",
event: "change"
},
props: {
checkval: Boolean
}
})
export default class test extends Vue {}
</script>
Now, my aim is to take it a step further and implement my component using a "class style" approach and enable two-way binding with an object. When I attempted this, the previous code with Boolean worked fine, but trying with an object did not yield success:
export class myobject {
checkval!: boolean;
test!: String;
}
@Component
export default class test extends Vue {
@Prop() checkval: Boolean = false;
@Model() model: myobject = {
checkval: true,
test: "checkval"
};
}
My questions now are:
- How should I proceed when binding an object?
- Is there a way to avoid using
Emitand simply set the variable likecheckval = trueormodel.checkval = true? - If I do need to use
Emit, what would be the correct implementation for the button, such as:
?<v-btn @click="$emit('change', {...this.model, checkval: true})">