Vue.js 在v-for中编辑项目

我正在尝试编辑

v-for

指令中的项，但是这似乎并不像我预期的那样有效。首先，以下是标记和组件方法：

<div class="card goal-item" v-for="goal in goals">
  <div v-if="!goal.edit" class="card-body">
    <p>
      {{ goal.value }}
      <span class="far fa-fw fa-edit float-right action" v-on:click="editGoal(index)"></span>
    </p>
  </div>
  <div v-else class="card-body">
    <div class="input-group">
      <input class="form-control" type="text" v-model="goal.value" v-on:keyup.enter="submitEditGoal(index)" />
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" v-on:click="submitEditGoal(index)"><span class="far fa-fw fa-check"></span></button>
      </div>
    </div>
  </div>
</div>

methods: {
  editGoal(index){
    this.goals[index].edit = true;
  },
  submitEditGoal(index){
    this.goals[index].edit = false;
  }
}

{{goal.value}}

方法：{
编辑目标（索引）{
this.goals[index].edit=true；
},
提交的目标（索引）{
this.goals[index].edit=false；
}
}

每当用户按下按钮进行编辑时，

v-else

不会触发。如果我在我的

editGoal（index）

中修改了

edit

属性后将其记录下来，它会说

true

，但是如果我打印出属性（

{{goal.edit}

），它仍然会说

false

---

这是不可能的，还是我做错了什么？

你想做的应该很好。您的行为越来越奇怪，因为您使用

：

而不是

@

引用方法，这导致这些方法在处理模板时实际执行，而不是将它们绑定到所需的事件

看看这把小提琴：

您将希望像这样更改代码。注：有3个

：

替换为

@

：

<div class="card goal-item" v-for="goal in goals">
  <div v-if="!goal.edit" class="card-body">
    <p>
      {{ goal.value }}
      <span class="far fa-fw fa-edit float-right action" @click="editGoal(index)"></span>
    </p>
  </div>
  <div v-else class="card-body">
    <div class="input-group">
      <input class="form-control" type="text" v-model="goal.value" @keyup.enter="submitEditGoal(index)" />
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" @click="submitEditGoal(index)"><span class="far fa-fw fa-check"></span></button>
      </div>
    </div>
  </div>
</div>

{{goal.value}}

我设法解决了我的问题

问题是初始数据上不存在

edit

属性。这是我的初始数据：

data: function (){
    return {
        goals: [
            {
                id: 1,
                value: "item 1"
            },
            {
                id: 2,
                value: "item 2"
            }
        ]
    }
}

因此，我无法查看

edit

属性

我通过添加以下方法和temp变量来存储我当前编辑的项目的索引，从而解决了我的问题：

data: function () {
    goals: ...,

    editIndex: null
},
methods: {
    editGoal(index){
        this.editIndex = index;
    },
    submitEditGoal(){
        this.editIndex = null;
    }
}

然后，我可以重写我的标记以检查此

editIndex

属性，如下所示：

<div class="card goal-item" v-for="(goal, index) in goals">
    <div class="card-body">
        <div v-if="editIndex != null && editIndex === index" class="input-group">
            <input class="form-control" type="text" v-model="goal.value" v-on:keyup.enter="submitEditGoal()" />
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" v-on:click="submitEditGoal()"><span class="far fa-fw fa-check"></span></button>
            </div>
        </div>
        <p v-else>
            {{ goal.value }}
            <span class="far fa-fw fa-edit float-right action" v-on:click="editGoal(index)"></span>
        </p>
    </div>
</div>

{{goal.value}}

哎呀，真糟糕。当然是

v-on:click

或

@click

。我会纠正我的错误，但这并没有解决我的问题。当我点击时，

v-else

仍然没有显示。你看小提琴了吗？它在概念上起作用。也许你发布的代码中没有其他内容。啊，我现在明白了。我的项目没有初始的

edit

属性，我正在将项目从其父项发送到组件中。我尝试在我创建的

函数中添加它们，但也没有成功。但是，如果我像您那样（在原始数组上）添加它们，它似乎确实起作用。如果您在editGoal或submitEditGoal中使用console.log（index），您会得到什么？正确的索引