为了账号安全,请及时绑定邮箱和手机立即绑定

在选择时获取 v-select 文本

在选择时获取 v-select 文本

慕妹3242003 2022-06-09 17:15:59
我看到了一些关于 v-select 和 slot 的文档,但我真的不明白我是否可以将它应用于我的示例codepen。我只需要获取选定的文本(而不是值),并在代码中的某处使用它:new Vue({  el: "#app",  vuetify: new Vuetify(),  data: {    state: {},    selectedText: "",    states: [      { value: "a", text: "alpha" },      { value: "b", text: "beta" },      { value: "g", text: "gamma" }    ]  },  methods: {    change: (newValue) => {      // do something with the text      // "alpha", "beta", or "gama"      console.log(newValue);    }  }});<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.2.20/dist/vuetify.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.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.2.20/dist/vuetify.min.js"></script><div id="app">  <v-app id="inspire">    <v-container fluid>      <label>my selected text is: {{state}}</label>      <v-row align="center">        <v-col cols="3">          <v-select v-model="state" :items="states" @change="change" :text="selectedText"></v-select>        </v-col>      </v-row>    </v-container>  </v-app></div>
查看完整描述

3 回答

?
叮当猫咪

TA贡献1776条经验 获得超12个赞

您需要将return-object道具添加到<v-select>


new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

    state: null,

    selectedText: "",

    states: [

      { value: "a", text: "alpha" },

      { value: "b", text: "beta" },

      { value: "g", text: "gamma" }

    ]

  },

  methods: {

    change: (newValue) => {

      // do something with the text

      // "alpha", "beta", or "gama"

      console.log(newValue.text);

    }

  }

});

<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.2.20/dist/vuetify.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.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.2.20/dist/vuetify.min.js"></script>

<div id="app">

  <v-app id="inspire">

    <v-container fluid>

      <label>my selected text is: {{state && state.text}}</label>

      <v-row align="center">

        <v-col cols="3">

          <v-select :items="states" v-model="state" @change="change" item-text="text" return-object></v-select>

        </v-col>

      </v-row>

    </v-container>

  </v-app>

</div>


编辑: 好的,根据您的方法,解决方案是使用国家代码在国家列表中找到适当的国家对象并设置它。


以下是您将如何解决它:


new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

    country: "c",

    countries: [{

        code: "a",

        name: "Ameriga Fatela"

      },

      {

        code: "b",

        name: "Bolivia Grande"

      },

      {

        code: "c",

        name: "Comore Potentia"

      }

    ]

  },

  methods: {

    getCountryCode() {

      return "b"; // have no c.name here!

    },

    change() {

      var newCode = this.getCountryCode();

      // Since we were getting objects when changing options, we must also set objects 

      this.country = this.countries.filter(country => country.code === newCode)[0];

    }

  }

});

<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.2.20/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.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.2.20/dist/vuetify.min.js"></script>

<div id="app">

  <v-app>

    <v-container>

      <div>current code is &gt;{{country.code}}&lt;</div>

      <div>current name is &gt;{{country.name}}&lt;</div>

      <v-row>

        <v-col cols="12">

          <v-select v-model="country" :items="countries" item-text="name" item-value="code" return-object></v-select>

          <v-btn @click="change">change by script to 'b'</v-btn>

          </vcol>

      </v-row>

    </v-container>

  </v-app>

</div>


查看完整回答
反对 回复 2022-06-09
?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

您的states对象同时包含value和text属性。如果您更改value为keyv-select 会识别更改,您可以text通过this.state. 像这样:


new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

    state: {},

    selectedText: "",

    states: [

      { key: "a", text: "alpha" },

      { key: "b", text: "beta" },

      { key: "g", text: "gamma" }

    ]

  },

  methods: {

    change: (newValue) => {

      // do something with the text

      // "alpha", "beta", or "gama"

      console.log(newValue); // Also returns text attribute instead of key

    }

  }

});

<div id="app">

  <v-app id="inspire">

    <v-container fluid>

      <label>my selected text is: {{state}}</label>

      <v-row align="center">

        <v-col cols="3">

          <v-select v-model="state" :items="states" @change="change"></v-select>

        </v-col>

      </v-row>

    </v-container>

  </v-app>

</div>


查看完整回答
反对 回复 2022-06-09
?
潇湘沐

TA贡献1816条经验 获得超6个赞

我发现的最佳选择是对所选文本使用computed属性,而不更改当前代码(在启动代码段后进入FullPage以正确查看输出):


new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

    countries: [

      { code: "a", name: "Ameriga Fatela" },

      { code: "b", name: "Bolivia Grande" },

      { code: "c", name: "Comore Potentia" }

    ],

    country: "b"

  },

  methods: {

    getCountryCode() {

      return "c"; // have no c.name here!

    },

    change() {

      this.country = this.getCountryCode();

    }

  },

  computed: {

    countryName() {

      return this.countries.find((c) => c.code === this.country).name;

    }

  }

});

<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.2.20/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.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.2.20/dist/vuetify.min.js"></script>

<div id="app">

  <v-app>

    <v-container>

      <div>current code is &gt;{{country}}&lt;</div>

      <div>current name is &gt;{{countryName}}&lt;</div>

      <v-row>

        <v-col cols="12">

          <v-select v-model="country" :items="countries" item-text="name" item-value="code"></v-select>

          <v-btn @click="change">change by script to '{{getCountryCode()}}'</v-btn>

          </vcol>

      </v-row>

    </v-container>

  </v-app>

</div>


另一种选择是(Codepen here)使用 Anurag Srivastava 的建议return-object,我返回了对象。但是,它有一些缺点,因为实际上我无法通过代码正确更改值:


new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

    country: "c",

    countries: [

      { code: "a", name: "Ameriga Fatela" },

      { code: "b", name: "Bolivia Grande" },

      { code: "c", name: "Comore Potentia" }

    ]

  },

  methods: {

    getCountryCode() {

      return "b"; // have no c.name here!

    },

    change() {

      var newCode = this.getCountryCode();

      this.country = newCode;

    }

  }

});

<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.2.20/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.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.2.20/dist/vuetify.min.js"></script>

<div id="app">

  <v-app>

    <v-container>

      <div>current code is &gt;{{country.code}}&lt;</div>

      <div>current name is &gt;{{country.name}}&lt;</div>

      <v-row>

        <v-col cols="12">

          <v-select v-model="country" :items="countries" item-text="name" item-value="code" return-object></v-select>

          <v-btn @click="change">change by script to 'b'</v-btn>

          </vcol>

      </v-row>

    </v-container>

  </v-app>

</div>


但是,在这两种情况下,我们都应该重新计算国家名称。这是不好的。想象一下,要构建组合框,我们必须进行繁重的操作……每次都重新计算它很耗时,而且确实不是最优的……


查看完整回答
反对 回复 2022-06-09
  • 3 回答
  • 0 关注
  • 407 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号