登录  /  注册
v-select 组件未在 v-select 框中显示所选选项
P粉343408929
P粉343408929 2023-12-24 22:47:36
[Vue.js讨论组]

我在使用 v-select 组件时遇到一个问题。 V-select 组件不显示所选项目...它在下拉列表中显示选项,但选择后在选择框中显示空白。

这就是问题所在-

下拉菜单显示..但选择后不显示任何内容。

像这样..它是空白的。

这是我的代码

<template>
  <div>
    <v-select
      label="broadcast"
      v-model="broadcast_"
      :options="broadcasters"
      :reduce="(broadcast) => broadcast.id"
    >
      <template v-slot:option="option">{{ option.name }}</template>
    </v-select>
  </div>
</template>
        
<script>
import Vue from "vue";
import vSelect from "vue-select";
Vue.component("v-select", vSelect);
    
export default {
  data() {
    return { 
      broadcasters: [
        {
          name: "ABC Live",
          id: 1,
        },
        {
          name: "Disney",
          id: 3,
        },
        {
          name: "24x7 Broadcast",
          id: 4,
        },
      ],
      broadcast_: "",
    };
  },
  watch: {
    broadcast_(val) {
      console.log(val);  //It prints desire data (i.e broadcast id)
    },
  },
};
</script>

P粉343408929
P粉343408929

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号