필터 적용 관련 질문입니다.

[김영찬]

필터 적용부분에서 컨테이너나 포스트부분에서는 필터가 잘되는데

등록하고나서는 필터 적용이 안되고 등록이되어서 이에 대해 질문 드립니다.

[App.vue]

<template>
  <div class="header">
    <ul class="header-button-left">
      <li @click="step--">Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li v-if="step == 1" @click="step++">Next</li>
      <li v-if="step == 2" @click="publish">올리기</li>
    </ul>

   
  </div>

  <Container :게시물="게시물" :step="step" :image="image" @write="content = $event"/>
  <button v-if="step == 0" @click="more">더보기</button>

  <div class="footer">
    <ul class="footer-button-plus">
      <input @change="upload" accept="image/*" type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>

  <!--
  <div v-if="step == 0">내용1</div>
  <div v-if="step == 1">내용2</div>
  <div v-if="step == 2">내용3</div>
  <button @click="step = 0">버튼1</button>
  <button @click="step = 1">버튼2</button>
  <button @click="step = 2">버튼3</button> -->
</template>

<script>

import Container from "./components/Container.vue";
import Data from "./data.js";
import axios from "axios";
axios.post()

export default {
  name: "App",
  data() {
    return {
      게시물 : Data,
      더보기 : 0,
      step : 0,
      image : '',
      content : '',
      choiceFilter : '',
    }
  },
  mounted() {
    this.emitter.on('applyFilter', (a)=>{
      this.choiceFilter = a
    })
  },
  components: {
    Container,
  },
  methods : {
    more() {
      axios.get(https://codingapple1.github.io/vue/more${this.더보기}.json)
      .then(result => {
        this.게시물.push(result.data);
        this.더보기++;
      })
    },

    upload(e) {
      let file = e.target.files;
      let url = URL.createObjectURL(file[0]);
      this.image = url;
      this.step++;
    },

    publish() {
      let myPost = {
        name: "Kim Hyun",
        userImage: "https://placeimg.com/100/100/arch",
        postImage: this.image,
        likes: 36,
        date: "May 15",
        liked: false,
        content: this.content,
        filter: this.choiceFilter,
      };
      this.게시물.unshift(myPost);
      this.step = 0;
    }
  },
}
</script>

 

[Container.vue]

<template>
    <div v-if="step == 0">
        <Post :filters="filters" :게시물="게시물[i]" v-for="(a, i) in 게시물" :key="i"/>
    </div>
    <!-- v-if 와 v-for은 같이 못 쓰기 때문에 div로 다시 만들면 사용가능 -->
    <!-- 필터선택페이지 -->
    <dvi v-if="step == 1">
        <div :class="choiceFilter" class="upload-image" :style = "{backgroundImage : url(${image})}"></div>
        <!-- background-image : url(${image})도 똑같은 문법 -->
        <div class="filters">
            <FilterBox :image="image" :filter="filter" v-for="filter in filters" :key="filter">
                {{filter}}
            </FilterBox>
        </div>
    </dvi>

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

<script>

import Post from "./Post.vue";
import FilterBox from "./FilterBox.vue";

export default {
  name: "containerApp",
  data() {
      return {
          filters : [ "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"],
          choiceFilter : '',
      }
  },
  props: {
    게시물: Array,
    step : Number,
    image : String,
    content : String,
  },
  mounted() {
    this.emitter.on('applyFilter', (a)=>{
      this.choiceFilter = a
    })
  },
  components: {
    Post,
    FilterBox,
  },
};
</script>

 

[FilterBox.vue]

<template>
    <div @click="apply" :class="filter" class="filter-item" :style="{backgroundImage : url(${image})}">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name : 'filterBox',
    methods: {
        apply() {
            this.emitter.emit('applyFilter', this.filter)
        }
    },
    props : {
        image : String,
        filter : String,
    },
}
</script>

 

[Post.vue]

<template>
  <div class="post">
    <div class="post-header">
      <div :style = "{backgroundImage : url(${게시물.userImage})}" class="profile"></div>
      <span class="profile-name">{{게시물.name}}</span>
    </div>
    <div :class="choiceFilter" :style = "{backgroundImage : url(${게시물.postImage})}" class="post-body"></div>
    <div class="post-content">
      <p>{{게시물.likes}}</p>
      <p>{{게시물.name}}{{게시물.content}}</p>
      <p class="date">{{게시물.date}}</p>
    </div>
  </div>
</template>

<script>
export default {
    name : 'PostContainer',
    props : {
        게시물 : Object,
    },
      mounted() {
    this.emitter.on('applyFilter', (a)=>{
      this.choiceFilter = a
    })
  },
};
</script>

post class에도 emitter 적용하고 class명에 바인딩 했음에도 결과창에는 필터가 적용되지 않습니다.

왜 그런걸까요?

[codingapple]

개발자도구에서 사진의 class에 필터명이 잘 들어가있는지부터 검사해봅시다 

Post.vue의 choiceFilter는 자식이 위로 보내주는게 아니라

App.vue의 게시물data에 저장된걸 props로 보내서 쓰는게 좋을듯요 

 

<div :class="choiceFilter" :style = "{backgroundImage : url(${게시물.postImage})}" class="post-body">

여기는 이렇게 적으면 class="" 가 2개가 될거같은데 이러면 한개는 잘 안먹을 수도 있습니다 

[글쓴이]

글