Value selected in v-select appears in v-textfield

Question

I'm trying to make the selected value in v-select be loaded in the v-text field, but there is an error that I really don't know how to fix, I ask for help to give a solution to my template, since I'm starting on vuetify.

<script>
export default {
  data() {
    return {
      selecionado: "",
      items: [
        {
          text: "select1",
          text2: "probando1",
          value: 1,
        },
        {
          text: "select2",
          text2: "probando2",
          value: 2,
        }
      ]
    };
  },
  methods: {
    selectedItem() {
      return this.items.find((item) => item.value == this.selecionado);
    },
    valorseleccionado() {
      return this.selectedItem ? this.selectedItem.text2 : "";
    },
  },
};
</script>

here's my vuetify template:

<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="3" md="3">
        <v-select
          v-model="selecionado"
          :items="items"
          label="selecciona"
        ></v-select>
      </v-col>
      <v-col cols="12" sm="3" md="3">
        <v-text-field
          v-model="valorseleccionado"
          label="Valor Seleccionado text2"
        ></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>

return:

Answer 1

You should use computed property instead method:

  computed: {
    vselectItem() {
      let selectedItem = this.items.find((item) => item.value == this.selected);
      return (selectedItem && selectedItem.text2) ? selectedItem.text2 : "";
    },
  }

Here is codepen sample show how it works.