vue-material mdAutocomplete inside电子-vue应用程序-设置问题
vue-material是一个基于Vue.js的UI组件库，提供了丰富的可复用的UI组件，方便开发者快速构建漂亮的Web应用程序。mdAutocomplete是vue-material中的一个自动完成组件，用于实现输入框的自动补全功能。
在电子-Vue应用程序中设置mdAutocomplete时，需要进行以下步骤：
- 安装vue-material：可以通过npm或yarn安装vue-material，具体安装命令可以参考官方文档。
- 引入vue-material：在Vue应用程序的入口文件中，通过import语句引入vue-material，并将其注册为Vue的插件。示例代码如下：
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)- 使用mdAutocomplete组件：在Vue组件中，可以使用mdAutocomplete组件来实现自动完成功能。示例代码如下：
<template>
<md-autocomplete
v-model="selectedItem"
:md-options="options"
md-clearable
md-menu-class="autocomplete-menu"
md-menu-props="{ top: true }"
md-menu-full-width
md-input-name="autocomplete-input"
md-input-id="autocomplete-input"
md-input-class="autocomplete-input"
md-input-placeholder="Search"
md-dense
></md-autocomplete>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
options: ['Option 1', 'Option 2', 'Option 3']
}
}
}
</script>
<style scoped>
.autocomplete-menu {
width: 300px;
}
.autocomplete-input {
width: 100%;
}
</style>在上述代码中，通过v-model绑定selectedItem来获取用户选择的值，通过:md-options绑定options数组来设置自动完成的选项列表。其他属性可以根据实际需求进行配置。
以上是使用vue-material的mdAutocomplete组件实现自动完成功能的基本步骤。在实际应用中，可以根据具体需求进行样式和功能的定制。
相关·内容
1回答
vue-material mdAutocomplete inside电子-vue应用程序-设置问题
vue-material、md-autocomplete、electron-vue
我正在试验电子vue种子应用程序，并已将电子版本升级到8，并将vue升级到最新版本。我正在我的src/renderer/router/index.js中安装vue-material组件：
import Vue from 'vue'
import Router from 'vue-router'
import { MdButton, MdContent, MdTabs, MdAutocomplete } from 'vue-material/dist/components'
import 'vue-material/dist/vue-mat
浏览 10提问于2020-05-31得票数 0
1回答
如何在angular 4 autoComplete材料中调用closePanel
angular、angular-material2
import { MdAutocomplete } from '@angular/material';
@Component({
template:'
<input type="text" [mdAutocomplete]="auto"/>
<md-autocomplete #auto="mdAutocomplete" #autoComplete>
<md-option>
So
浏览 0提问于2017-07-23得票数 17
回答已采纳
1回答
没有显示内容的Vue材料标签
javascript、vue.js、vue-router
当使用Vue Material选项卡从选项卡中选择该页时，程序必须显示该页。我已经配置了路由和安装了依赖项，但是当我单击选项卡时，没有显示。代码有两个Vue组件来测试两个屏幕内容。ideia是在视图顶部显示一个类似工具栏的行，并将其填充到选项卡中。这两个屏幕是Menu和Home。
App.vue
<template>
<div>
<md-tabs md-sync-route>
<md-tab id="tab-home" md-label="Home" to="/components/H
浏览 0提问于2019-08-12得票数 0
回答已采纳
2回答
Vue Material md-输入与示例不同
vue.js、vue-material
我想在我的应用程序中使用vue材料，我已经在我的应用程序中安装了vue-material，并在我的main.js中执行以下操作：
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.use(VueMaterial)
但是，当我在我的索引页面中使用vue-material中的某些组件时，如下所示：
<template>
<md-field>
<label>Username</la
浏览 1提问于2018-05-03得票数 1
1回答
如何将整个物体传递给md-自动完成角4的输入
javascript、angular、angular-material2
通常，我有一个对象-> filteredDrivers。
单个对象如下所示：
DRIVER_ID: 99 DRIVER_NAME: "JOHN SNOW"
我在md中使用的-自动完成：
<md-input-container>
<input type="text"
name="driver"
mdInput
[mdAutocomplete]="auto"
placeholder="Driver"
浏览 1提问于2017-08-07得票数 2
回答已采纳
3回答
控制角材料的位置2自动完成选项板
angular2-forms、angular-material2
我试图控制的位置角材料2自动完成选项面板，并把这个面板在一个独立的div从实际输入的div。
以下是我尝试过的：
<div fxLayout="row">
<div fxFlex="50">
<form [formGroup]="formStatus.form">
<div>
<md-input-container>
<input mdInput formControlName="title" placeh
浏览 4提问于2017-06-17得票数 6
2回答
如何在角度2材质自动完成中获取选定项值
angular、autocomplete、angular-material2
我已经创建了一个自动完成与角材料的领域，并从网络api获得国家列表成功。
CountryID ->项目值(或索引)
国家/地区->项目文本
当我尝试获取选定项的值(而不是文本)时，它会像预期的那样返回文本。但我需要获取所选项目的值。
这是我的代码：
this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France
和
<md-input-container>
<input mdInput placeholder=&
浏览 3提问于2017-07-11得票数 8
回答已采纳
1回答
Vue-Material切换主题(属性'material‘在类型'Vue’上不存在)
vue.js、themes、vue-material
我有创建和加载vue-typescript vs vue-material主题的工作副本。 看起来像这样： SCSS代码： @import "~vue-material/dist/theme/engine"; // Import the theme engine
@include md-register-theme("default", (
primary: md-get-palette-color( lime, A200), // The primary color of your application
accent: md-get-palett
浏览 61提问于2020-07-09得票数 0
回答已采纳
2回答
Angular 2 mdAutocomplete双向数据绑定
angular、angular-material、md-autocomplete
我正在尝试创建带有自定义对象数据的Angular 2 MdAutocomplete，但在获取和设置对象数据时遇到了问题。它在过滤和显示数据方面看起来不错，但不是绑定数据，它不是在编辑表单上设置项，也不是在保存表单时获取项。下面是我的模板和代码：
**HTML:**
*<md-input-container>
<input type="text" required placeholder="Store" mdInput [formControl]="storeControl" [mdAutocomplete]="a
浏览 4提问于2017-02-22得票数 1
3回答
加速角度材质自动完成或替代
angular、autocomplete、angular-material2
我使用Angular Materials来允许用户搜索以下格式的字符串："ID #- the“。数据是在页面加载的最开始时预先检索的，包含大约39,000个字符串。
我的HTML代码是：
<md-input-container>
<input mdInput placeholder="TSN Search" [mdAutocomplete]="auto" [formControl]="TSN_Ctrl">
</md-input-container>
<md-autocomplete #a
浏览 3提问于2017-07-21得票数 8
3回答
Material2自动完成时不显示的值
angular、angular-material2、md-autocomplete
我试图让自动完成功能显示object的一个参数，但保存另一个参数，到目前为止，它似乎没有表现出来。
代码符合Material2自动完成站点：
不同之处在于我要保存的值是'option.Id‘而不是'option’。
错误在于，虽然它记录了option.Id，但它并不实际显示输入字段中的值(将其保留为空)。
my-comp.html
<md-input-container>
<input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="a
浏览 5提问于2017-05-19得票数 3
1回答
在一个vue实例中具有多个数据的相似组件
javascript、vue.js、vue-component、element-ui
一个页面的组件基本相似，但填充的是单独的数据，组件来自Element-UI var Main = {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value:
浏览 12提问于2019-08-29得票数 0
回答已采纳
2回答
Vue.js 2.x选择内部组件没有得到值
javascript、laravel、vue.js、vuejs2、vue-component
我试图记住如何从组件中返回select中的值。
尽管我打赌很容易忘记或者我只是做错了。
我称之为组件：
<custom-select :options="options" v-model="selectedMain"></custom-select>
然后我得到了组件本身：
<template>
<fieldset class="form-group">
<select v-model="selected"
id=
浏览 0提问于2018-05-15得票数 0
1回答
这里的自动属性是什么?为什么需要它？
javascript、angular、angular2-forms
我试图学习角材料2，并在自动完成中遇到了这个#auto属性，我知道auto可以被任何文本替换，但是为什么在auto之前需要一个#，这个属性的名称是什么？
<md-input-container>
<input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete"
浏览 1提问于2017-07-22得票数 13
回答已采纳
2回答
使用元素ui调整选项值较大时的选择框
javascript、vue.js、vuejs2、vue-component、element-ui
使用元素ui调整选项值较大时的选择框
这是如何实现的，请指导
它不应该在选择后剪切字符串
<template>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
&
浏览 4提问于2019-04-15得票数 1
1回答
如何使Vue组件与v型保持值类型一起工作？
javascript、vue.js、vue-component
问题
当我在HTML v-model上拥有一个<select>时，v-model是将给定的属性设置为该值的选定值保持类型--如果我将一个数字绑定到<option>，则模型属性被设置为number，如果我绑定一个对象，则它被设置为该对象。
<script>
export default {
data: {
options: [5, 10, 15, 'text', { 'description': 'I am an Object' }],
}
};
</script>
<temp
浏览 1提问于2018-06-26得票数 1
回答已采纳
2回答
使用Material2 MdAutocomplete组件-如何使用onselect事件
angular、angular-material2
我正在尝试为material2 beta2使用新的自动完成组件。2我可以获得组件和选项菜单来呈现很好的效果，但是我想不出如何在从列表中选择一个选项之后预编一个操作
<md-input-container dividerColor="accent" [mdTooltip]="hint" mdTooltipPosition="above">
<input mdInput [formControl]="selectedInput" [mdAutocomplete]="auto" placeho
浏览 3提问于2017-02-21得票数 3
回答已采纳
1回答
在Vue中只导入每个组件所需的组件是一个好主意吗？
javascript、performance、vue.js
我想知道在Vue中只导入每个组件所需的依赖关系对性能是否有好处，还是某些组件中使用的所有依赖项都应该全局加载？Vue是如何编译组件的？是在加载应用程序的一个页面时，所有这些组件都被加载，还是组件也正在加载？
更具体的：
这样做更好吗？
<template>
... Some template code
</template>
<script>
import { MdDialog, MdContent, MdButton } from 'vue-material/dist/components'
export def
浏览 3提问于2018-09-18得票数 1
回答已采纳
3回答
如何在父-子组件之间绑定数据
vue.js、data-binding、vuejs2
我有一个简单的表单组件，只有一个选择选项。每当我选择一个选项时，都会在主组件中呈现一个子组件。我的问题是我无法让Vue将父组件数据绑定到子组件数据。
form.settings是动态的，所以我不能在Form.vue之前设置属性。
此表单通过axios提交给Spring应用程序，我在提交表单时看到客户端的form.settings为null。
我是Vue的新手，以下是我的尝试：
Form.vue
<template>
<div>
<form>
<div>
<select v-model="for
浏览 7提问于2020-03-17得票数 0
回答已采纳
1回答
在一个文件中VueJS两个相同的组件，其中一个组件的数据更改会改变另一个组件的数据吗？
javascript、windows、google-chrome、vue.js
我已经为dropdown创建了一个VueJS组件。
<template>
<div>
<select v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
<option v-for="(option, index) in dropdownOptions"
v-bind:key="index">
浏览 2提问于2019-12-29得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
