슨상님 필터 적용 질문 드립니다~

기존 post 에  제가 올린 필터로 덮어 씌우는 듯한데 으찌해야 할까요? 🙂

<hr />

App.vue

<template>
  <div>
    <div v-if="step == 0">
      <button @click="more">
        <!-- <button @click="$store.dispatch('getData')">   -->
        게시글 더 보기
      </button>
    </div>

    <!-- footer -->
    <div v-if="step == 0">
      <div class="footer">
        <ul class="footer-button-plus">
          <input @change="upload" type="file" id="file" class="inputfile" />
          <label for="file" class="input-plus">+</label>
        </ul>
      </div>
    </div>

    <!-- header -->
    <div class="header">
      <!-- step == 1 -->
      <div v-if="step == 1">
        <ul class="header-button-left">
          <li style="color: black">Cancel</li>
        </ul>

        <ul class="header-button-right" @click="step++">
          <li style="color: black">Next</li>
        </ul>

        <div style="font-size: 40px; text-align:center;">🖌</div>
      </div>

      <!-- step == 2 -->
      <div v-if="step == 2">
        <ul class="header-button-right">
          <li @click="publish" style="color: black">발행</li>
        </ul>
      </div>
    </div>

    <!-- component -->
    <Container
      :selectFilter="selectFilter"
      :post="post"
      :step="step"
      :url="url"
      @uploadText="content = $event"
    />
  </div>
</template>

<script>
import Container from "./components/Container.vue";
import post from "./assets/data/post";
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      content: "",
      url: "",
      step: 0,
      post: post,
      count: 0,
      selectFilter: "",
    };
  },
  components: { Container },
  mounted() {
    this.emitter.on("clickBox", (a) => {
      // console.log(a); // 수신 1개 확인함!
      this.selectFilter = a; // selectFilter 에는 _1977 들어있는 상태
    });
  },
  methods: {
    more() {
      axios
        .get(https://minjaehyun.github.io/vue/more${this.count++}.json)
        .then((result) => {
          this.post.push(result.data);
        })
        .catch();
    },
    upload(e) {
      let files = e.target.files;
      let file = files[0];
      let url = URL.createObjectURL(file);
      this.url = url;
      this.step = 1;
    },
    publish() {
      var uploadPost = {
        name: "tester",
        userImage: "https://placeimg.com/100/100/arch",
        postImage: this.url,
        likes: 41,
        date: "May 15",
        liked: false,
        content: this.content,
        filter: this.selectFilter,
      };
      this.post.unshift(uploadPost);
      this.step = 0;
    },
  },
};
</script>

<style>
@import "assets/css/app.css";
</style>

Container.vue

<template>
  <div>
    <!-- post page -->
    <div v-if="step == 0">
      <Post
        :selectFilter="selectFilter"
        :post="item"
        v-for="item in post"
        :key="item.id"
      />
    </div>

    <!-- 필터 선택 page -->
    <div v-if="step == 1">
      <div
        :class="selectFilter"
        class="upload-image"
        :style="{ backgroundImage: url(${url}) }"
      ></div>
      <div class="filters">
        <FilterBox
          :style="{ backgroundImage: url(${url}) }"
          :filter="filter"
          :url="url"
          v-for="filter in filterList"
          :key="filter.id"
        >
          <!-- 아래 {{ filter }} 는 slot 에 내려줄 데이터이다. -->
          <!-- <template v-slot:a
            ><span>{{ filter }}</span></template
          > -->
        </FilterBox>
      </div>
    </div>

    <!-- 글 작성 page -->
    <div v-if="step == 2">
      <div
        :class="selectFilter"
        class="upload-image"
        :style="{ backgroundImage: url(${url}) }"
      ></div>
      <div class="write">
        <textarea
          placeholder="글을 작성 해주세요:)"
          class="write-box"
          @input="$emit('uploadText', $event.target.value)"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
import FilterBox from "./FilterBox.vue";
import filterList from "../assets/data/instagramFilter";

export default {
  name: "Container",
  components: { Post, FilterBox },
  data() {
    return {
      filterList: filterList,
    };
  },
  props: {
    post: Array,
    step: Number,
    url: String,
    selectFilter: String,
  },
};
</script>
<style>...</style>

FilterBox.vue

<template>
  <div
    @click="fire"
    :class="filter"
    class="filter-item"
    :style="{ backgroundImage: url(${url}) }"
  >
    <!-- Container.vue 에서 v-slot 사용하여 데이터 내려줄 시 아래 slot 으로 받을 수 있다 -->
    <!-- <slot name="a"></slot> -->
    {{ filter }}
  </div>
</template>

<script>...</style>

<hr />

<h4><span style="color: #ff0000;">Post.vue</span></h4>
<template>
  <div class="post">
    <!-- post-header -->
    <div class="post-header">
      <div
        class="profile"
        :style="{ backgroundImage: url(${post.userImage}) }"
      ></div>
      <span class="profile-name">{{ post.name }}</span>
    </div>
    <!-- @click="$store.commit('likesButton')"  -->
    <!-- class=" post-body" -->
    <!-- :class="selectFilter + ' post-body'" -->
    {{ selectFilter }}
    <div
      :class="selectFilter + ' post-body'"
      :style="{ backgroundImage: url(${post.postImage}) }"
    ></div>

    <!-- post-content -->
    <div class="post-content">
      <p>{{ post.likes }} Likes</p>
      <p>
        <strong>{{ post.name }}</strong
        >{{ post.content }}
      </p>
      <p class="date">{{ post.date }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Post",
  props: {
    post: Object,
    selectFilter: String,
  },
};
</script>

<style>...</style>

<hr />