在v-select中选择的值出现在v-textfield中

Question

我正在尝试将v-select中的选定值加载到v-text字段中，但是有一个错误我真的不知道如何解决，我寻求帮助以提供解决方案我的模板，因为我是从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>

这是我的vuetify模板：

<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>

返回：

Answer 1

您应该使用computed属性代替方法：

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

这里有codepen个示例展示了其工作原理。