清空inputValue

Question

老师，怎样做到输入内容点击提交按钮后清空输入框内的内容inputValue呢？我现在对将input和list的逻辑分开后将inputValue置为空还不会

Answer 1

Dell 2021-05-29 20:50:19

你不能这么写，你这么写不是修改原来的inputValue，是自己又搞了一个变量。你需要把原来的inputValue传递给effect函数，对原来的inputValue进行修改。

• 提问者 Symbol王独秀 #1

  我是按照您的写法去写的呀，我试了下还是不能置空，要不老师您抽个时间补录一段视频讲解一下吧

• Dell 回复 提问者 Symbol王独秀 #2

  你看下我的代码和你的代码，肯定不一样，我的inputVal 我是从effect中互相传递的，你这是自己又搞了一个inputVal 出来

• 提问者 Symbol王独秀 回复 Dell #3

  呀，不会吧老师，我当时可是跟着您一个代码一个代码的敲的呢，我明天再看看😊

Answer 2

Dell 2021-03-09 00:10:56

inputValue.value = '' 就可以了

• 提问者 Symbol王独秀 #1

  在inputEffect里面写吗老师？还是在listEffect里面写？list里面写好像不行吧

• Dell 回复 提问者 Symbol王独秀 #2

  addItemToList 函数里啊

• weixin_慕沐5469740 回复 Dell #3

  写在addItemList函数里不行

Answer 3

Dell 2021-03-06 19:59:21

截个图看下代码

• 提问者 Symbol王独秀 #1

  代码和老师的差不多的：<script>
  			const listRelativeEffect = () => {
  				const {
  					reactive
  				} = Vue
  				const list = reactive([])
  				const addItemToList = item => {
  					if (!item) {
  						alert('请输入内容')
  						return
  					}
  					list.push(item)
  				}
  
  				return {
  					list,
  					addItemToList
  				}
  			}
  
  			const inputRefEffect = () => {
  				const {
  					ref
  				} = Vue
  				const inputValue = ref('')
  
  				return {
  					inputValue
  				}
  			}
  
  			const app = Vue.createApp({
  				setup() {
  					const {
  						list,
  						addItemToList
  					} = listRelativeEffect()
  					const {
  						inputValue
  					} = inputRefEffect()
  
  					return {
  						list,
  						addItemToList,
  						inputValue
  					}
  				},
  				template: `
  		      <div>
  		        <div>
  		          <input v-model="inputValue" />
  		          <button @click="() => addItemToList(inputValue)">提交</button>
  		        </div>
  		        <ul>
  		          <li v-for="(item, index) in list" :key="index">{{item}}</li>
  		        </ul>
  		      </div>
  		    `,
  			});
  
  			const vm = app.mount('#root');
  		</script>