显示选定的值<v-select>在一个<v-text-field> ?

Question

我有一个<v-select>并且我希望在选择一个值时该值出现在<v-text-field>中。 例如，在选择select1时，我在<v-text-field>中可视化这个值，其值是“ probando1”。

我如何使用 Vuetify 做到这一点？

<template>
  <v-layout align-start>
    <v-flex>
      <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>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      selecionado: "",
      items: [
        { text: "select1", text2: "probando1", value: 1 },
        { text: "select2", text2: "probando2", value: 2 }
      ]
    };
  }
};
</script>

Answer 1

您可以为此使用计算属性：

工作演示

 Vue.config.productionTip = false; Vue.component('my-component', { template: '#my-component', data() { return { selecionado: "", items: [{ text: "select1", text2: "probando1", value: 1 }, { text: "select2", text2: "probando2", value: 2 } ] }; }, computed: { selectedItem() { return this.items.find(item => item.value == this.selecionado); }, valorseleccionado() { return this.selectedItem ? this.selectedItem.text2 : ''; } } }); var vm = new Vue({ el: '#app', vuetify: new Vuetify() });

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><style>.as-console-wrapper{display: none!important}</style> <div id="app"> <v-app> <my-component></my-component> </v-app> </div> <template id="my-component"> <v-layout align-start> <v-flex> <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> </v-flex> </v-layout> </template>