Question

我正在尝试编辑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;
  }
}

每当用户按下按钮进行编辑时，v-else不会触发。如果我在自己的edit中修改了editGoal(index)属性后，它的确显示了true，但是如果我打印出该属性（{{ goal.edit }}），它仍然显示了false

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

Answer 1

关于您要做什么的想法应该很好。之所以会出现奇怪的行为，是因为您使用:而不是@来引用您的方法，这导致这些方法在处理模板时实际执行，而不是将它们绑定到所需的事件。 / p>

查看这个小提琴：https://jsfiddle.net/e7jv0wyc/

您将要像这样更改代码。请注意，:被@替换为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>

Answer 2

我设法解决了问题。

问题在于初始数据上没有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>

在v-for中编辑项目

2 个答案: