在 Vue.js 中单击按钮时清除文本字段？

Posted 2023-02-23

【中文标题】在 Vue.js 中单击按钮时清除文本字段？

【英文标题】：Clearing Text Fields on button click in Vue.js?

【发布时间】：2019-06-10 20:00:12

【问题描述】：

我有一个布局，我正在循环获取文本字段和一个按钮。我如何在按钮上添加一个功能，以便它只清除它各自的字段。 看看小提琴here。

<div id="app">
  <h2>Each text with it's own state and clear should clear the respective 
 text fields</h2>
  <ul v-for="todo in todos">
  <li>
  <input type="text" :placeholder="`$todo.text`">
  </li>
  <li>
  <input type="text" :placeholder="`$todo.text1`">
  </li>
  <button>Clear</button>
  </ul>

new Vue(
  el: "#app",
  data: 
    todos: [
   text: "Learn javascript", text1:"Hey" ,
   text: "Learn Vue", text1:"Hello"  ,
   text: "Play around in JSFiddle", text1:"Ciao"  ,
   text: "Build something awesome", text1:"Something"
   ]
  
)

【问题讨论】：

您要清除占位符吗？

不是占位符，但是假设您应该能够输入当前占位符为“Learn JavaScript”的字段1，然后输入占位符为“嘿”的字段2，然后单击，这两个字段被清除。

请看我的回答

【参考方案1】：

你真的应该阅读https://vuejs.org/v2/的文档

您缺少许多基本构造函数来实现您的目标。首先，您需要将点击事件添加到您的按钮。 (https://vuejs.org/v2/guide/events.html)

接下来，您需要在渲染期间引用待办事项的索引 (https://vuejs.org/v2/guide/list.html)

您可以从这里创建一个名为 clear 的简单方法：

new Vue(
  el: "#app",
  data: 
    todos: [
       text: "Learn JavaScript", text1:"Hey" ,
       text: "Learn Vue", text1:"Hello"  ,
       text: "Play around in JSFiddle", text1:"Ciao"  ,
       text: "Build something awesome", text1:"Something"
    ]
  ,
  methods: 
    clear (index) 
      // Allows for unlimited keys
      for (let key in this.todos[index]) 
        this.$set(this.todos[index], key, null);
      
    
  
)

请注意，在 clear 方法中，我通过使用 $set 方法 (https://vuejs.org/v2/api/#vm-set) 并引用传递的索引来确保反应性。

最后，我使用 Vue 的 v-model 将输入值绑定到 todo 模型，我可以获得额外的功劳吗？ (https://vuejs.org/v2/api/#v-model)

完成的代码： https://jsfiddle.net/cdsgu62L/10/

【讨论】：

非常感谢。是的，给你额外的学分。 :)

【参考方案2】：

如果您想清除特定字段，您可以添加一个方法clear，它将索引作为参数，但在此之前您应该将value 和value1 项目添加到每个todo 并将它们绑定到字段如下：

new Vue(
  el: "#app",
  data: 
    todos: [
        text: "Learn JavaScript",
        text1: "Hey",
        value1:'',
        value:''
          
      ,
      
        text: "Learn Vue",
        text1: "Hello",
        value1:'',
        value:''
      ,
      
        text: "Play around in JSFiddle",
        text1: "Ciao",
        value1:'',
        value:''
      ,
      
        text: "Build something awesome",
        text1: "Something",
        value1:'',
        value:''
      
    ]
  ,
  methods:
       clear(i)
       this.todos[i].value='';
        this.todos[i].value1='';
       
  
)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <h2>Each text with it's own state and clear should clear the respective text fields</h2>
  <ul v-for="(todo,i) in todos">
    <li>
      <input type="text" :placeholder="`$todo.text`" v-model="todo.value">
    </li>
    <li>
      <input type="text" :placeholder="`$todo.text1`"  v-model="todo.value1">
    </li>
    <button @click="clear(i)">Clear</button>
  </ul>
</div>

【讨论】：

这简直是完美的画面。谢谢兄弟。你总是帮助我:) 也给你额外的学分。和 P.S.你们是天才

我的回答出了什么问题？你为什么取消接受它？

哎呀，对不起。我想我错误地点击了它。我的错。

别担心，我认为它出了点问题