적용된 필터가 원래 필터로 돌아옵니다

[엄태헌]

여기까지는 잘 동작하는데,



위 이미지처럼 unshift로 전체 데이터에 추가하는 과정에서 필터가 적용되지 않고 원래 필터로 돌아옵니다.
필터는 아래 코드처럼 잘 넣었습니다.
publish() {
let myPost = {
 name: "Kim Hyun",
 userImage: "https://picsum.photos/100?random=3",
 postImage: this.url,
 likes: 36,
 date: "May 15",
 liked: false,
 content: this.writing,
 filter: this.filterName,
};
this.instaData.unshift(myPost);
this.tab = 0;
},


아래 코드는 app.vue 코드이고,

<template>
<div>
<div class="header">
<ul class="header-button-left">
Cancel

<ul class="header-button-right">
<li v-if="tab == 1" @click="tab++">Next
<li v-if="tab == 2" @click="publish">발행

< img src="./assets/logo.png" class="logo" />
</div>

<Container
@writing="writing = $event"
:url="url"
:tab="tab"
:instaData="instaData"
:filterName="filterName"
 />

<button v-if="count < 2" @click="more">더보기</button>

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

</div>
</div>
</template>

<script>
import Container from "./components/Container.vue";
import instaData from "./assets/instaData.js";
import axios from "axios";

export default {
 name: "App",
data() {
return {
 instaData: [...instaData],
 count: 0,
 tab: 0,
 url: "",
 writing: "",
 filterName: "",
};
},
mounted() {
this.emitter.on("filterName", (a) => {
// a에는 emitter로 받아온 this.data가 들어있다
this.filterName = a;
});
},
 components: {
 Container,
},
 methods: {
publish() {
let myPost = {
 name: "Kim Hyun",
 userImage: "https://picsum.photos/100?random=3",
 postImage: this.url,
 likes: 36,
 date: "May 15",
 liked: false,
 content: this.writing,
 filter: this.filterName,
};
this.instaData.unshift(myPost);
this.tab = 0;
},
more() {
if (this.count < 2) {
 axios
.get(`https://codingapple1.github.io/vue/more${this.count}.json`)
.then((result) => {
// result는 get요청으로 가져온 결과
// get요청 성공시 실행할 코드작성

this.instaData.push(result.data);
this.count++;

console.log(result.data);
});
}
},
upload(e) {
// e.target.files: 내가 업로드한 이미지
let file = e.target.files;
let url = URL.createObjectURL(file[0]);
 console.log(url);
this.tab++;
this.url = url;
},
},
};
</script>


아래코드는 container.vue 코드이고

<template>
<div>
<!-- navbar -->
<div v-if="tab == 0">
<Post v-for="(a, i) in instaData" :key="i" :a="a" />
</div>

<!-- 필터선택페이지 -->
<div v-if="tab == 1">
<div
:class="`${filterName} upload-image`"
:style="{ backgroundImage: `url(${url})` }"
></div>
<div class="filters">
<!-- slot으로 부모 -> 자식 데이터 전송법
 1. 자식컴포넌트에 <slot></slot>넣기
 2. 부모컴포넌트에 있는 <자식컴포넌트>태그 사이에 데이터 넣기 -->
<FilterBox
v-for="(data, i) in filters"
:data="data"
:key="data"
:i="i"
:filters="filters"
:url="url"
><span>{{ data }}</span></FilterBox
>
<!-- data를 props로 보내면 i,filters 안보내고 한번에 해결가능 -->
</div>
</div>

<!-- 글작성페이지 -->
<div v-if="tab == 2">
<div
:style="{ backgroundImage: `url(${url})` }"
:class="`${filterName} upload-image`"
></div>
<div class="write">
<textarea
v-model="description"
@change="$emit('writing', description)"
class="write-box"
></textarea>
</div>
</div>
</div>
</template>

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

export default {
 name: "containerComponent",
data() {
return {
 description: "write!!",
 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",
 ],
};
},
 components: {
 Post,
 FilterBox,
},
 props: {
 instaData: Array,
 tab: Number,
 url: String,
 filterName: String,
},
};
</script>

아래 코드는 FilterBox.vue 코드입니다.

<template>
<div
@click="fire"
:class="`filter-item ${filters[i]}`"
:style="{ backgroundImage: `url(${url})` }"
>
<slot></slot>
</div>
</template>

<script>
export default {
 name: "filterBoxComponent",
 methods: {
fire() {
this.emitter.emit("filterName", this.data);
},
},
 props: {
 url: String,
 filters: Array,
 i: Number,
 data: String,
},
};
</script>

[codingapple]

Post.vue에 필터 클래스명 데이터바인딩을 안했나봅니다

[글쓴이]

글