请稍等 ...

清空input框value值

看了其他同学提的问题
您的回答 inputValue.value = ""
inputValue在addItemToList中，没有这个变量

shalama 2021-03-26 18:15:53

源自：6-7 使用 Composition API 开发TodoList（2）

1486

收起

提交取消

5回答

慕少3567675 2021-04-15 11:42:32

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root">
      <div>
        <input v-model="inputValue" />
        <button @click="addItemToList">添加</button>
      </div>
      <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
      </ul>
    </div>
  </body>
  <script>
    const listRelativeEffect = (inputValue, resetInputValue) => {
      const { reactive } = Vue;
      const list = reactive([]);
      const addItemToList = () => {
        list.push(inputValue.value);
        resetInputValue();
      };
      return { list, addItemToList };
    };

    const inputRelativeEffect = () => {
      const { ref } = Vue;
      const inputValue = ref("");
      const resetInputValue = () => {
        inputValue.value = "";
      };
      return { inputValue, resetInputValue };
    };

    const app = Vue.createApp({
      setup() {
        const { inputValue, resetInputValue } = inputRelativeEffect();
        const { list, addItemToList } = listRelativeEffect(
          inputValue,
          resetInputValue
        );

        return {
          list,
          addItemToList,
          inputValue,
        };
      },
    });

    const vm = app.mount("#root");
  </script>
</html>

参考诺亚诺亚同学的问答，改成这样的话可以实现点击按钮添加数据到列表后，清空input框的内容。

2 回复有任何疑惑可以回复我~

GalenT 2023-05-28 23:53:28

导出一个resetInputValue，然后再将resetInputValue函数传入listRelativeEffect函数中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.global.js"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        const listRelativeEffect = () => {
            const { reactive } = Vue;
            const list = reactive([]);
            const addItemToList = (item, resetInputValue) => {
                list.push(item);
                resetInputValue();
            };
            return { list, addItemToList }
        }

        const inputRelativeEffect = () => {
            const { ref } = Vue;
            const inputValue = ref('');
            const handleInputValueChange = (e) => {
                inputValue.value = e.target.value;
            };
            const resetInputValue = () => {
                inputValue.value = "";
            }
            return { inputValue, handleInputValueChange, resetInputValue };
        }

        const app = Vue.createApp({
            setup() {
                const { list, addItemToList } = listRelativeEffect();
                const { inputValue, handleInputValueChange, resetInputValue } = inputRelativeEffect();
                return { list, addItemToList, inputValue, handleInputValueChange, resetInputValue }
            },

            template: `
            <div>
                
                <div>
                    <div>{{inputValue}}</div>
                    <input :value="inputValue" @input="handleInputValueChange"/>
                    <button @click="addItemToList(inputValue, resetInputValue)">添加</button>
                </div>
                <div>
                    <ul>
                        <li v-for="item in list" :key="item">{{item}}</li> 
                    </ul>
                </div>
            </div>
            `
        });
        const vm = app.mount('#root');
    </script>
</body>

</html>

1 回复有任何疑惑可以回复我~

avisionav 2021-08-28 14:30:11

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="https://unpkg.com/vue@next" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="root"></div>

</body>

</html>

<script>

//封装对List的操作

const listEffect=()=>{

const {reactive}=Vue;

const list=reactive([1,2]);

const addItem=(inputValue)=>{

list.push(inputValue)

}

return {

list,

addItem,

}

}

const inputEffect=()=>{

const {ref}=Vue;

const inputValue=ref('123');

const resetValue=()=>{

inputValue.value=""

}

return {

inputValue,

resetValue,

}

}

const app=Vue.createApp({

setup(){

//流程调度中转

const {inputValue,resetValue} = inputEffect()

const {list, addItem} = listEffect() //获取函数执行的返回值

const addItemToList=()=>{

addItem(inputValue.value)//先添加

resetValue()//再清空

}

return {

list,

addItemToList,

inputValue,

}

},

template:`

<div>

<div>

<input v-model="inputValue" />

<button @click="addItemToList">添加</button>

</div>

<ul>

<li v-for="(item,index) in list" :key="index">{{item}}</li>

</ul>

</div>

`

})

const vm=app.mount("#root")

</script>

0 回复有任何疑惑可以回复我~

慕少3567675 2021-04-15 11:20:27

我也遇到这样的问题，不知道怎样清空input框value值。因为addItemToList函数里面不知道怎样获取响应式的inputValue。

0 回复有任何疑惑可以回复我~

Dell 2021-03-27 20:32:22

嗯？同学你是帮我做个解答是吗？

0 回复有任何疑惑可以回复我~

慕少3567675 #1

按照老师的代码，将list和input的逻辑分开写之后。在点击button的时候，将input的数据push进list，但是不知道怎样才能清空input的数据。因为在addItemToList函数里面无法获取响应式的inputValue，只有传进来的item参数。

回复有任何疑惑可以回复我~ 2021-04-15 11:14:06

相似问题

请问 9-2 搜索框点击右边叉以后，input中的值怎么清空呢？我试了一些办法都不行；

清空 input 框

点击电影搜索框中的叉号，如何把搜索框input中的内容清除呢？

老师，当点击add时，input框中内容怎么清除？

关闭搜索框如何同时清空input框的文本？

登录后可查看更多问答，登录/注册

Vue3入门与项目实战掌握完整知识体系

参与学习 3330 人
提交作业 1877 份
解答问题 1436 个

明星讲师DELL亲授，全方位知识点+高匹配度项目，入门到深度掌握

了解课程

本课精华内容

问答作业

https://www.fastmock.site/#/project/6581 依旧提示失败或项目不存在

202 1

获取本地存储信息报错

1.3k 18

老师，如果提取use方法如何传递$event

1.3k 14

老师，后台接口访问不了了

1.0k 12

上线手在用电脑打开无法显示图片

948 11

查看更多本课问答

意见反馈帮助中心 APP下载