清空input框value值

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

shalama

2021-03-26

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

写回答

5回答

慕少3567675

2021-04-15

<!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框的内容。

GalenT

2023-05-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>

avisionav

2021-08-28

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

//封装对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>

<ul>

</ul>

</div>

})

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

</script>

慕少3567675

2021-04-15

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

Dell

2021-03-27

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

慕少3567675

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

2021-04-15

共1条回复

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

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

3382 学习 · 1454 问题

查看课程

相似问题

清空 input 框

回答 2

清空购物车问题

回答 2

数组使用reative后，怎么做清空的操作？我试了重新赋值一个 [] 或 reative([ ]) 好像不行，arr.length = 0是可以的。

回答 1

为什么不是 ref 中的value

回答 1

如果子组件是一个input元素,如何做到在输入框中输入不同的值，父组件的count也发生改变，做到双向绑定。

回答 1

打开慕课网App查看更多内容