Question

代码段

<div v-for="item in dataItems">
 <div v-if="enableEdit">
  <input type="text" v-model="name">
 </div>
 <div v-else>
   {{name}}
 </div>
<button @click="enableEdit = true">click</button>

这不起作用，因为在脚本中enableEdit没有声明为变量。是否可以在v-for中创建局部变量？

Answer 1

据我所知，不可能在模板内部创建变量，但是您可以通过执行以下操作来达到相同的效果。

编辑模板：

  <div v-for="item in dataItems" :key="item.id">
    <div v-if="editedElementId !== item.id" @click="editItem(item.id)">
      {{item.name}}
    </div>
    <div v-else>
     <input type="text" placeholder="New name..." v-model="item.name" />
    </div>
  </div>

请记住始终将:key与v-for一起使用。

然后在editedElementId: null内添加data和新方法editItem：

  methods: {
    editItem(id) {
        this.editedElementId = id
    }
  }

http://jsfiddle.net/eywraw8t/317760/

Answer 2

处理undefined，可以生成一个特定于实际for循环的字段名：

<div v-for="(month, mi) in months" :key="mi">
    <div v-for="(day, di) in days" :key="di">
     ... <div v-if="generated_fields['month_' + mi + '_day_' + di]">
        ... <here_you_can_use> generated_fields['month_' + mi + '_day_' + di] ...
...
data:function(){
    return{
        ...
        generated_fields:{}//for fields starts undefined, autofills when written
        ...
}

在v-for中创建局部变量

2 个答案: