uni-search-bar简单搜索效果

news/2024/7/10 2:10:54 标签: vue, javascript

预期思路:input框内容变化,调用@input方法 拿到输入框的值发送到后端,接收到后端的数据,再利用this保存,但是input方法里没有this指向

uni-search-app组件很不错,样式好看,功能齐全,但是事件里面没有this指向,百度了也没有什么发现,后来想到一个一个办法,利用watch监听。
vue
vue2–watch
在这里插入图片描述
时间不够 贴个代码

javascript"><template>
	<view class="margin-top">

		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" />

		<view class="padding flex flex-wrap justify-between align-center bg-white" v-for="(item,index) in vips "
			@click="itemClick(item)">
			<text>{{item.userName}}</text>
		</view>

		<!-- 悬浮按钮 -->
		<uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger"></uni-fab>

	</view>
</template>

<script>
	import {
		getAllUser,
		getUserByName
	} from "../../network/request.js"

	import mS from "../../components/mehaotian-search/mehaotian-search.vue"

	export default {
		components: {
			mS
		},
		data() {
			return {
				vips: [],
				searchValue: "",

				// 悬浮按钮
				pattern: {
					"color": "#fff",
					"selectedColor": "#ffffff",
					"backgroundColor": "#7952B3",
					"buttonColor": "#7952B3"
				},
				content: [{
					"iconPath": "../../static/img/add.png",
					"selectedIconPath": "../../static/img/add_active.png",
				}],
				horizontal: "right",
				vertical: "bottom",
				direction: "horizontal"
			}
		},

		/**
		 * watch 
		 */
		watch: {

			// 监听搜索框值的变化
			searchValue(n, o) {
				getUserByName(n.value).then(res => {
					var res = res[1].data.data
					this.vips = res
					console.log(res);
				})
			}

		},
		
		


		}
	}
</script>

<style>

</style>

效果
在这里插入图片描述


http://www.niftyadmin.cn/n/936524.html

相关文章

SAP_ALV

调用功能模块&#xff1a;CALL FUNCTION REUSE_ALV_GRID_DISPLAYEXPORTINGi_interface_check 接口一致性检查i_callback_program sy-repid 当前程序名is_layout layout 输出样式it_fieldca…

ajax获取本地json的方法及填坑

实现步骤 json文件 {"first":[{"id":"1","sex":"男"},{"id":"2","sex":"男"},{"id":"3","sex":"男"},{"id":"4",…

CentOS系统时间与现在时间相差8小时解决方法

很多网友在安装完CentOS系统后发现时间与现在时间相差8小时&#xff0c;这是由于我们在安装系统的时选择的时区是上海&#xff0c;而CentOS默认bios时间是utc时间&#xff0c;所以时间相差了8小时。这个时候的bios的时间和系统的时间是不一致的&#xff0c;一个代表 utc 时间&a…

struts2 json 定义全局Date格式

使用struts2的json插件时&#xff0c;自己定义日期格式经常使用的方式是在get属性上加入JSON注解&#xff0c;这个对于少量Date属性还能够&#xff0c;可是假设date字段多了&#xff0c;总不可能去给每一个date get方法加入json注解吧&#xff01; 发现极大不便后查看了sturts-…

jQuery this指向问题

看代码 var mov_obj {init: function() {//默认渲染第一个this.get_data(1)//添加点击事件this.add_event()},add_event: function() {//this指向对象var _that this// 点击影院热映$(".category").eq(0).on("click", function() {//更新下划线//this指…

Ubuntu Server 12.04 LTS搭建SVN服务及修改端口

采用了apache结合svn的方式。 首先安装apache、subversion、svn-apache sudo apt-get install apache2 sudo apt-get install subversion sudo apt-get install libapache2-svn 然后创建svn项目仓库 sudo mkdir /svn sudo cp /etc/apache2/mods-enabled/dav_svn.conf /etc/apac…

HTML5+CSS3视频教程_从入门到精通 HTML开发框架 HTML视频教程 HTML

HTML5CSS3视频教程_从入门到精通 HTML开发框架 HTML视频教程 HTML实战跨平台开发技术-HTML5CSS3从入门到精通(配两实战项目&#xff0c;兼顾PC版&&移动版网页手游开发) 课程分类&#xff1a;HTML5CSS3 适合人群&#xff1a;初级 课时数量&#xff1a;79课时 用到技术…

web 开发之js---JS变量也要注意初始化

原先以为js作为弱类型语言&#xff0c;变量的初始化没必要&#xff0c;但是&#xff1a; var text; text"你好"; alert(text); 对话框弹出的内容是&#xff1a;"undefined你好" 这是因为text未初始化&#xff0c;它的内容是&#xff1a;undefined&#xff…