在Vue JS中编辑数组中的项目描述

Posted 2023-02-22

【中文标题】在Vue JS中编辑数组中的项目描述

【英文标题】：Edit item description in array in Vue JS

【发布时间】：2017-08-08 10:50:27

【问题描述】：

我正在尝试使用 Vue JS 向任务应用程序添加编辑功能。

我在编辑按钮上有一个点击事件 - @click="editShow"，它显示了所有项目的编辑输入。我需要这个只显示相应的输入。 然后我无法将编辑值保存到项目描述 - @keyup.enter="editTask"。由于某种原因，任务是指 keyup 事件而不是对象。我认为这就是造成问题的原因。

这是我目前所拥有的，https://jsfiddle.net/clintongreen/0p6bvd4j/

HTML

    <div class="container" id="tasks">

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
             message 
        </h3>
      </div>
      <ul class="list-group">
        <li class="list-group-item clearfix" v-for="task in tasklist" >
            <strong v-if="!editActive"> task.description </strong>
            <input v-model="editTaskName" v-bind:placeholder="task.description" v-if="editActive" @keyup.enter="editTask" type="text" class="form-control input-height pull-left">
            <div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed">
              <button type="button" class="btn btn-default" @click="completeTask(task)">Complete</button>
              <button type="button" @click="editShow" class="btn btn-default">Edit</button>
              <button type="button" class="btn btn-default" @click="removeTask(task)">Remove</button>
            </div>
            <button class="btn btn-default btn-sm completed text-muted pull-right disabled btn-width" v-else>Completed</button>
        </li>
        <li class="list-group-item clearfix">
            <input v-model="newTaskName" @keyup.enter="newTask" type="text" class="form-control input-height pull-left">
            <button class="btn btn-success btn-sm pull-right btn-width" @click="newTask">Add Task</button>
        </li>
      </ul>
    </div>

</div>

JS

    new Vue(

    el: '#tasks',

    data: 
        message: 'Tasks',
        completed: null,
        newTaskName: '',
        editTaskName: '',
        editActive: false,
        tasklist: [
             description: 'Read', completed: true ,
             description: 'Write', completed: true ,
             description: 'Edit', completed: false ,
             description: 'Publish', completed: false 
        ]
    ,

    methods: 
        completeTask: function(task)
            task.completed = true;
        ,
        newTask: function()
            this.tasklist.push(description: this.newTaskName, completed: false);
        ,
        removeTask: function(task)
            this.tasklist.splice(this.tasklist.indexOf(task), 1);
            console.log(task);
        ,
        editShow: function(task)
            this.editActive = true // should only show the corresponding edit input
            console.log(task);
        ,
        editTask: function(task)
            console.log(task);
        
    

)

【参考方案1】：

我在您的任务中添加了 editing 布尔值。您可以切换它以将单个任务切换到编辑模式。此外，我通过keyup.enter 上的editTask 传递任务。最后，由于在您的输入中使用了v-model，因此无需进行保存，因为描述是双向绑定的。您的 enter keyup 处理程序只需要切换回模式。

new Vue(

    el: '#tasks',

    data: 
        message: 'Tasks',
        completed: null,
        newTaskName: '',
        tasklist: [
             description: 'Read', completed: true, editing: false ,
             description: 'Write', completed: true, editing: false  ,
             description: 'Edit', completed: false, editing: false  ,
             description: 'Publish', completed: false, editing: false  
        ]
    ,

    methods: 
        completeTask: function(task)
            task.completed = true;
        ,
        newTask: function()
            this.tasklist.push(description: this.newTaskName, completed: false, editing: false);
        ,
        removeTask: function(task)
            this.tasklist.splice(this.tasklist.indexOf(task), 1);
            console.log(task);
        ,
        editTask: function(task)
            task.editing = false;
            console.log(task);
        
    

)

	body
		margin-top: 4em;
	
	.completed
		text-decoration: line-through;
	
	.btn-width
		width: 182px;
	
	.input-height
		width: 346px !important;
		height: 30px;
	
	.container
		width: 600px;
	
	strong
		line-height: 2.2;
	

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container" id="tasks">

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
             message 
        </h3>
      </div>
      <ul class="list-group">
        <li class="list-group-item clearfix" v-for="task in tasklist" >
            <strong v-if="!task.editing"> task.description </strong>
            <input v-model="task.description" v-if="task.editing" @keyup.enter="editTask(task)" type="text" class="form-control input-height pull-left">
            <div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed">
              <button type="button" class="btn btn-default" @click="completeTask(task)">Complete</button>
              <button type="button" @click="task.editing = true" class="btn btn-default">Edit</button>
              <button type="button" class="btn btn-default" @click="removeTask(task)">Remove</button>
            </div>
            <button class="btn btn-default btn-sm completed text-muted pull-right disabled btn-width" v-else>Completed</button>
        </li>
        <li class="list-group-item clearfix">
            <input v-model="newTaskName" @keyup.enter="newTask" type="text" class="form-control input-height pull-left">
            <button class="btn btn-success btn-sm pull-right btn-width" @click="newTask">Add Task</button>
        </li>
      </ul>
    </div>

</div>

【讨论】：

@ClintonGreen 没问题 :) 还有其他方法可以工作，但这是第一个想到的。有一些清理工作需要完成。添加新任务时，例如应该设置编辑值。

是的，这很容易，您已经完成了所有繁重的工作。干杯

@Bert 这个例子似乎不像预期的那样工作。当我尝试在小提琴中添加一个项目，然后尝试编辑该项目时，编辑器没有打开。

@user1477388 你是对的，有一个错误。它在这里：this.tasklist.push(description: this.newTaskName, completed: false,); 当小提琴添加一个新项目时，它没有editing 属性。添加editing 属性并将其默认为false，可以更正该错误。正确的代码在答案中，但不在小提琴中。

@Bert 不错！感谢更新！