VueコンポーネントのEnterキーを押して、値を取得します

VueコンポーネントでEnterキーを押して値を取得する2つの方法

コード内の関数をインストールnpm install nanoid、インポート、呼び出しnanoid()て、ランダムなID値を生成します

1つ目：eventデータの取得に使用

<template>
	<div>
		<input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/>
	<div/>
</template>

<script>
	import {
    
    nanoid} from 'nanoid'
	export default {
    
    
		name:'AddMessage',
		methods: {
    
    
			add(event){
    
    
			// 将用户的输入包装成一个todo对象
				const todoObj = {
    
    id:nanoid(),title:event.target.value,done:false)
			}
		}
	}
</script>

2番目：v-model双方向バインディングデータを使用する

<template>
	<div>
		<input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/>
	<div/>
</template>

<script>
	export default {
    
    
		name:'AddMessage',
		data(){
    
    
			return {
    
    
				title:''
			}
		},
		methods: {
    
    
			add(){
    
    
				// 校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				// 将用户的输入包装成一个对象
				const todoObj = {
    
    id:nanoid(),title:this.title,done:false),
				// 将输入框的数据进行清除
				this.tite = '' 
			}
		}
	}
</script>