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 示例，展示它是如何工作的。