필터적용 오류

[이희재]

게시물을 발행하기 전에는 필터 적용이 잘 돼있는데
발행을 하면 적용이 안됩니다

코드에 문제가 있는지 알려주세요 
(필요없는 코드는 지웠습니다)

// App.vue

<template>
  <div class="header">
    <ul class="header-button-left">
      <li @click="cancel" v-if="step !== 0">Cancel

   

    <ul class="header-button-right">       <li @click="publish" v-if="step == 2">발행

      <li @click="next" v-else>Next

   

    < img src="./assets/logo.png" class="logo" />   </div> <span>선택된 필터 : {{ sentFilter }}</span> // sentFilter가 정상 작동하는지 확인하는 코드인데 정상적으로 작동합니다 발행을 눌러도 데이터는 잘 들어오구요   <Container     :data="data"     :step="step"     :postImage="postImage"     @write="content = $event"     :sentFilter="sentFilter"   />   <button @click="more()">더보기</button> </template> <script> export default {   name: "App",   data() {     return {       data: data,       count: 0,       step: 0,       postImage: "",       content: "",       sentFilter: "",     };   },   components: {     Container,   },   mounted() {     this.emitter.on("sendFilterName", (필터) => {       this.sentFilter = 필터;     });   }, methods: {     publish() {       let 내게시물 = {         name: "Kim Hyun",         userImage: "https://picsum.photos/100?random=1",         postImage: this.postImage,         likes: 36,         date: "May 15",         liked: false,         content: this.content,         filter: this.sentFilter,       };       this.data.unshift(내게시물);       this.step = 0;     },   }, }; </script> <style> @import "style.css"; </style>   // Container.vue

<template>
  <div>
    <!-- 포스트페이지 -->
    <div v-if="step == 0">
      <Post :data="data" />
    </div>

    <!-- 필터선택페이지 -->
    <div v-if="step == 1">
      <div
        class="upload-image"
        :class="sentFilter"
        :style="`background-image:url(${postImage})`"
      ></div>
      <div class="filters">
        <FilterBox
          :postImage="postImage"
          :filter="filter"
          v-for="(필터, i) in filter"
          :key="i"
          :필터="필터"
        >
          <span>{{ 필터 }}</span></FilterBox
        >
      </div>
    </div>

    <!-- 글작성페이지 -->
    <div v-if="step == 2">
      <div
        class="upload-image"
        :class="sentFilter"
        :style="`background-image:url(${postImage})`"
      ></div>
      <div class="write">
        <textarea
          @input="$emit('write', $event.target.value)"
          class="write-box"
        >
write!</textarea
        >
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
import FilterBox from "./FilterBox.vue";

export default {
  name: "Container-a",
  data() {
    return {
      filter: [
        "aden",
        "_1977",
        "brannan",
        "brooklyn",
        "clarendon",
        "earlybird",
        "gingham",
        "hudson",
        "inkwell",
        "kelvin",
        "lark",
        "lofi",
        "maven",
        "mayfair",
        "moon",
        "nashville",
        "perpetua",
        "reyes",
        "rise",
        "slumber",
        "stinson",
        "toaster",
        "valencia",
        "walden",
        "willow",
        "xpro2",
      ],
      filterIndex: 0,
    };
  },
  props: {
    data: Object,
    step: Number,
    postImage: String,
    sentFilter: String,
  },
  components: {
    Post,
    FilterBox,
  },
};
</script>

// filterBox.vue

<template>
  <div
    class="filter-item"
    :class="필터"
    :style="`background-image : url(${postImage})`"
    @click="sendFilterName"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "filterbox-a",
  props: {
    postImage: String,
    filter: Array,
    필터: String,
  },
  methods: {
    sendFilterName() {
      this.emitter.emit("sendFilterName", this.필터);
    },
  },
};
</script>

저는 app.vue 에만 mitt 사용해서 데이터 바인딩 하였고
props 문법으로 하위 컴포넌트로 데인터 전송하였습니다

app.vue에 {{sentFilter}} 는 정상적으로 나오지만
publish함수 안에서 filter : this.sentFilter 에서 작동을 안하는것 같습니다.

post.vue 에 post-body도 건들여봤지만
그 부분을 건들이면 모든 post-body의 필터가 적용돼서 답이 아닌것같은데

어떤 부분이 틀린건지..
제가 짠 코드에서 무슨 문제가 있을까요??

[codingapple]

Post.vue의 이미지들에 필터이름이 class=""안에 잘넣어지고 있나 확인해봅시다

[글쓴이]

글