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

您可以为此使用computed properties：

工作演示

 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>

在<v-text-field>中显示选择的<v-select>值？

1 个答案: