Vue.js “我的编辑”按钮更改视图中的所有组_Vue.js

Vue.js “我的编辑”按钮更改视图中的所有组

vue.js

Vue.js “我的编辑”按钮更改视图中的所有组,vue.js,Vue.js,这是我的页面组的视图，例如，当我单击测试编辑按钮时，它会在后端更改该测试，但在视图上它会更改所有组。我添加了两张我的视图照片，一张或我不点击，另一张或我点击测试按钮编辑页面代码：模板： <template> <v-container fluid grid-list-md> <v-data-iterator :items="groups" :items-per-page.sync="itemsPerPage"

这是我的页面组的视图，例如，当我单击测试编辑按钮时，它会在后端更改该测试，但在视图上它会更改所有组。我添加了两张我的视图照片，一张或我不点击，另一张或我点击测试按钮编辑

页面代码：

模板：

    <template>
  <v-container fluid grid-list-md>
    <v-data-iterator
      :items="groups"
      :items-per-page.sync="itemsPerPage"
      :footer-props="{ itemsPerPageOptions }"
    >
      <template v-slot:default="props">
        <v-layout wrap>
          <v-flex v-for="group in groups" :key="group.id" xs12 sm6 md4 lg3>
            <v-card>
              <v-card-title
                ><h4>{{ group.name }}</h4>
                <v-btn
                  class="mx-2"
                  fab
                  dark
                  small
                  color="orange"
                  @click="editGroup(group)"
                >
                  <v-icon dark>edit</v-icon>
                </v-btn>
                <v-btn
                  class="mx-2"
                  fab
                  dark
                  small
                  color="red"
                  @click="deleteGroup(group)"
                >
                  <v-icon dark>remove</v-icon>
                </v-btn>
              </v-card-title>
              <v-divider></v-divider>

              <groupsMembers :members="group.members" :editItem="edit" />

              <v-form ref="form" v-if="edit">
                <v-text-field
                  v-model="member.email"
                  :counter="15"
                  label="Email du membre"
                  required
                ></v-text-field>
                <v-btn color="success" class="mr-4" @click="validate(group)">
                  Ajouter un nouveau membre
                </v-btn>
              </v-form>
            </v-card>
          </v-flex>
        </v-layout>
      </template>
    </v-data-iterator>
  </v-container>
</template>


{{group.name}
编辑
去除
新成员

Java脚本：

<script>
import groupsMembers from "./groupsMembers";
export default {
  props: {
    groups: Array
  },
  components: {
    groupsMembers
  },
  data: () => ({
    edit: false,
    itemsPerPageOptions: [4, 8, 12],
    itemsPerPage: 4,
    member: {
      email: "",
      groupId: 0,
      registerToSeances: true
    }
  }),
  methods: {
    validate(group) {
      this.member.groupId = group.id;
      this.$store.dispatch("groups/addMember", this.member);
    },
    editGroup(group) {
      console.log("groups", group);
      this.edit = !this.edit;
    },
    deleteGroup(group) {
      this.$store.dispatch("groups/deleteGroup", group);
    }
  }
};
</script>


从“/groupsMembers”导入groupsMembers；
导出默认值{
道具：{
组：数组
},
组成部分：{
组成员
},
数据：（）=>({
编辑：false，
itemsPerPageOptions:[4,8,12]，
项目页码：4，
成员:{
电邮：“，
groupId:0，
注册表项：true
}
}),
方法：{
验证（组）{
this.member.groupId=group.id；
此.$store.dispatch（“groups/addMember”，this.member）；
},
编辑组（组）{
控制台日志（“组”，组）；
this.edit=！this.edit；
},
删除组（组）{
此.$store.dispatch（“组/deleteGroup”，组）；
}
}
};

我不知道它可能在哪里

您有一个

编辑

字段，用于控制所有

v-btn

实例的可见性

要单独控制每个字段，您需要将此字段移动到

组

（或具有并行集合）

简单的第一步：

将
```
edit
```
更改为数组
将对
```
edit
```
的引用更改为
```
edit[id]
```
（其中
```
id
```
是
```
使用的组的id:key
```
）

您可能需要将

edit[id]

读为

edit[id]| | false

，以避免

未定义的问题
您有一个edit
字段用于控制所有v-btn
实例的可见性
要单独控制每个字段，您需要将此字段移动到组
（或具有并行集合）
简单的第一步：

将edit
更改为数组
将对edit
的引用更改为edit[id]
（其中id
是使用的组的id:key
）

您可能需要将编辑[id]
读为编辑[id]| | false
，以避免未定义的问题
您有一个例子吗？@NoPLZ我已经草拟了一个方法，但我只是用部分代码进行假设。您有一个例子吗？@NoPLZ我已经草拟了一个方法，但我只是用部分代码做假设。