0

I have a v-select list box in one component (RoadsType.vue) and its items are listed in data in export default.

<v-select v-model="position"
             :items="gps_items"
             :loading="loading"
              label="GPS R-Positioning"
              :color="color"
            ></v-select>
export default {
data() {
    return {
        gps_items: ["0", "5", "7", "10", "15", "Random"]
    };
}, }

Now on selecting the item in the v-select input box, I want the output to be shown in another component's (Summary.vue) v-card text box, by calling a function.

  <v-card title="Environment"
          :subtitle="getPosition"       
  </v-card>
getPosition() {
          return `GPS R-Positioning: ${this.position}`;
        }

But the output doesn't print if I call the v-model of the v-select box. What should be done?

Jacin Jacob
  • 23
  • 4

1 Answers1

1

If they are on the same page you can emit the value of RoadType.vue

// RoadType.vue
export default {
    data() {
      return {
        gps_items: ['0', '5', '7', '10', '15', 'Random']
      };
    },
    watch: {
      position(value) {
          this.$emit('position', value)
      }
    }
  };

and then on sample-page.vue you can pass the data to Summary.vue by using props

// sample-page.vue
<template>
    <div>
        <RoadsType @position="getPosition"/>
        <Summary :position="position"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        position: ''
      };
    },
    methods: {
        getPosition(position) {
            this.position = position
        }
    },
  };
</script>

Add props on Summary.vue

// Summary.vue
<template>
  <div>
    <v-card title="Environment" :subtitle="getPosition"> </v-card>
  </div>
</template>

<script>
  export default {
    props: {
      position: {
        type: String,
        default: ''
      }
    },
    computed: {
      getPosition() {
        return `GPS R-Positioning: ${this.position}`;
      }
    }
  };
</script>

or you could also use Vuex aswell to simply it.

Paolo
  • 26
  • 2