0

我向父组件发送一个事件。当您单击列表元素时，将使用 v-model 指令处理切换。此外，我需要有关是否选择列表元素以在父级中进行 v-if 渲染的信息。我在 child 中使用了 emit 以及方法和计算的 props。两者都给我留下了错误。我不知道如何解决这个问题。

-此外，我需要共享父组件在子组件之前呈现，尽管父组件依赖于来自子组件的事件。

- 我也在Error in v-on handler: "TypeError: _vm.updateKumas is not a function"控制台上收到错误消息。

- 此图像还显示了到达父组件的事件：

在此处输入图像描述

这是代码

子组件


<template>
  <v-card class="pa-2" height="225" width="150" flat>
    <v-btn disabled block small>Kumaş Tipi</v-btn>
    <v-list dense>
      <v-list-item-group v-model="kumas" color="primary">
        <v-list-item v-for="(item, i) in items" :key="i" class="my-list-class">
          <v-list-item-content>
            <v-list-item-title
              v-text="item.text"
              @click="changeKumas"
            ></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    kumas: null,
  }),
  props: ["items"],

  methods: {
    changeKumas() {
      this.$emit("changeKumas", this.kumas);
    },
  },
};
</script>

父组件

<template>
  <div>
    <v-card>
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-row
              align="start"
              justify="start"
              style="height: 300px; width: 1200px"
            >
              <Kumas :items="items" @changeKumas="updateKumas($event)" />
              
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </div>
</template>

<script>
import Kumas from "./ListingComponents/Kumas";

export default {
  data: () => ({
    kumas: null,
    items: [
      { text: "İtem1", icon: "mdi-clock" },
      { text: "İtem2", icon: "mdi-account" },
      { text: "İtem3", icon: "mdi-flag" },
      { text: "İtem1", icon: "mdi-clock" },
      { text: "İtem2", icon: "mdi-account" },
      { text: "İtem3", icon: "mdi-flag" },
    ],
  }),
  methods: {
    updateKumas(updatedKumas) {
      console.log(` Kumas in step1 is ${updatedKumas}`);
      this.kumas = updatedKumas;
      console.log(` Kumas in step1 is ${this.kumas}`);
    },
  },
  components: { Kumas },
};
4

0 回答 0