-
필터 적용부분에서 컨테이너나 포스트부분에서는 필터가 잘되는데
등록하고나서는 필터 적용이 안되고 등록이되어서 질문드립니당.
[App.vue]
<template>
<div class="header">
<ul class="header-button-left">
<li>Cancel</li>
</ul>
<ul class="header-button-right">
<li v-if="step == 1" @click="step++">Next</li>
<li v-if="step == 2" @click="publish">finish</li>
</ul>
</div><Container :게시물="게시물" :step="step" :이미지="이미지" @write="작성한글 = $event"/>
<button @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>
</ul>
</div><!-- <div v-if="step == 0">내용0</div>
<div v-if="step == 1">내용1</div>
<div v-if="step == 2">내용2</div>
<button @click="step = 0">버튼0</button>
<button @click="step = 1">버튼1</button>
<button @click="step = 2">버튼2</button> -->
</template><script>
import Container from "./components/Container.vue";
import postdata from "./assets/postdata.js";
import axios from "axios";export default {
name: "App",
data() {
return {
게시물: postdata,
더보기: 0,
step: 0,
이미지: "",
작성한글: "",
선택한필터: "",
};
},
mounted() {
this.emitter.on("박스클릭함", (a) => {
this.선택한필터 = a;
});
},
components: {
Container: Container,
},
methods: {
upload(e) {
let 파일 = e.target.files;
console.log(파일);
let url = URL.createObjectURL(파일[0]);
console.log("유알엘:" + url);
this.이미지 = url;
this.step++;
},
publish() {
var 내게시물 = {
name: "Kim Hyun",
userImage: "https://placeimg.com/100/100/arch",
postImage: this.이미지,
likes: 36,
date: "May 15",
liked: false,
content: this.작성한글,
filter: this.선택한필터,
};this.게시물.unshift(내게시물);
this.step = 0;console.log(내게시물);
},
more() {
axios
.get(https://codingapple1.github.io/vue/more${this.더보기}.json)
.then((결과) => {
this.게시물.push(결과.data);
this.더보기++;
});
},
},
};
</script>
[Container.vue]<template>
<div>
<div v-if="step == 0">
<Post :게시물="게시물[i]" v-for="(a, i) in 게시물" :key="i"/>
</div>
<!-- <Post :인스타데이터="인스타데이터[1]"/>
<Post :인스타데이터="인스타데이터[2]"/> --><!-- 필터선택페이지 -->
<div :class="선택한필터" class="upload-image" v-if="step == 1" :style="background-image : url(${이미지})"></div>
<div class="filters" v-if="step == 1">
<FilterBox :필터="필터" :이미지 = "이미지" v-for="필터 in 필터들" :key="필터">
{{필터}}
</FilterBox>
</div><!-- 글작성페이지 -->
<div :class="선택한필터" class="upload-image" v-if="step == 2" :style="background-image : url(${이미지})"></div>
<div class="write" v-if="step == 2">
<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 {
data(){
return{
필터들 : [ "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"],
선택한필터 : '',
}
},
mounted(){
this.emitter.on('박스클릭함', (a)=>{
this.선택한필터 = a
})
},
components: {
Post: Post,
FilterBox : FilterBox,
},
props: {
게시물: Array,
step : Number,
이미지 : String,
},
};
</script>[Filterbox.vue]
<template>
<div @click="fire" :class="${필터} filter-item" :style="background-image : url(${이미지})">
<slot></slot>
<!-- <span>{{필터}}</span> -->
<!-- <button @click="fire">버튼</button> -->
</div>
</template><script>
export default {
name : 'filterbox',props : {
이미지 : String,
필터 : String,
},
data(){
return{}
},
methods : {
fire(){
this.emitter.emit('박스클릭함', this.필터)
}
}
};
</script>등록하고나서 console.log 로 찍어보면 filter 에 잘 들어가 있는데 등록 후 화면에는 필터가 적용이 안되서 나오네요
[console]
{name: 'Kim Hyun', userImage: 'https://placeimg.com/100/100/arch', postImage: 'blob:http://localhost:8080/a5cd0fd7-6873-414c-b054-a75b3c84151a', likes: 36, date: 'May 15', …}
content: "sssssss"
date: "May 15"
<em><strong>filter: "inkwell"</strong></em>
liked: false
likes: 36
name: "Kim Hyun"
postImage: "blob:http://localhost:8080/a5cd0fd7-6873-414c-b054-a75b3c84151a"
userImage: "https://placeimg.com/100/100/arch"
- 답변은 로그인 후 가능합니다.