How do I use v-model on none form-related elements?

Question

Before anything else, I'm using Vuetify's VSwitch component inside my-component. I want to return the value of my-component to the parent.

something like <my-component v-model="returnedData"></my-component>

Then the inside <my-component></my-component>

<template>
  <div>
    <v-switch v-model="toggledData" value="John"></v-switch>
    <v-switch v-model="toggledData" value="Andrew"></v-switch>
    <v-switch v-model="toggledData" value="Melissa"></v-switch>
    <v-switch v-model="toggledData" value="Elizabeth"></v-switch>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      toggledData: []
    }
  }
}
</script>

I want to return the value of toggledData to the parent that's using it if possible. I've been browsing the net for a while and I've been seeing only with inputs. But it was possible to some of Vuetify's components like the VTreeviewso I was thinking maybe it's possible.

score 1 · Answer 1 · edited Jul 15 '22 at 05:54

Using v-model like in your example:

<my-component v-model="returnedData"></my-component>

is (by default) equivalent to this:

<my-component :value="returnedData" @input="returnedData = $event"></my-component>

Any component can support v-model just by having a value prop and emitting an input event. The names of the prop and event can be changed using the model option, see https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

All of this assumes that you want two-way data binding. In your question you seem to imply that you just want to pass data up to the parent, which is only one way. For that you only need to emit an event and listen for that event using an @ listener.

Genuinely creating a two-way data binding would be tricky in this case. The easiest way is to drop the v-model on the v-switch and use the prop and event separately. There are alternatives, such as using v-model with a computed property that has a getter and setter, but I'm not convinced that would make things any clearer.

score 0 · Answer 2 · answered May 19 '19 at 08:57

You can do something like this: <v-switch @change="$emit('swithValue', value)" value="John"></v-switch> Then in your parent component just listen for swithcValue like @switchValue="myFunction" Your function implicitly gets the emitted value and you can do with it as you wish.

score 0 · Accepted Answer · answered May 19 '19 at 10:02

The parent component listens to the child's changes with the childToParent and if there is any change I call the childChanged () method

// Parent Component

<template>
  <div id="parent">
    <p>{{parentToggledData}}</p>
    <Child v-on:childToParent="childChanged"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "parent",
  components: {
    Child
  },
  data() {
    return {
      parentToggledData: []
    };
  },
  methods: {
    childChanged(value) {
      this.parentToggledData = value;
    }
  }
};
</script>

I listen to the changes on each v-switch, and if there is one, I call the emitToParent () method in this method, I send the changes to the parent with $emit which takes as parameter the event listened by the parent childToParent and "the value to send this.toggledData

// Child Component

<template>
  <div id="child">
    <v-switch v-model="toggledData" value="John" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Andrew" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Melissa" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Elizabeth" @change="emitToParent"></v-switch>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      toggledData: []
    };
  },
  methods: {
    emitToParent(event) {
      console.log(event)
      console.log(this.toggledData)
      this.$emit("childToParent", this.toggledData);
    }
  }
};
</script>

How do I use v-model on none form-related elements?

3 Answers3