hands on vue3 - component를 이용해 누른 버튼에 따라 다른 화면 보여주기

[목표]

1. 각 버튼을 누르면 다른 화면을 보여준다.

화면1 : StoredResource

화면2 : AddResource

 

2. 누르지 않은 버튼은 flat 클래스로 설정한다. 

 

3. 누른 버튼은 색상이 있어야함

 

 

---

[App.vue]

<template>
  <the-header/>
  <div>
    <the-resources>

    </the-resources>
  </div>
</template>

<script>
import TheHeader from './components/layout/TheHeader.vue'
import TheResources from './components/layout/TheResources.vue'

export default {
  components: {
    TheHeader,
    TheResources,
  },
  methods:{
    rmvRsc(id){
      console.log("From App.vue rmvRec is Running...");
      console.log(`emitVal: ${id}`);
      this.resources = this.resources.filter((element, index, array) => {
        return element.id != id;
      });
      console.log(JSON.stringify(this.resources));
    }
  },
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', sans-serif;
}

body {
  margin: 0;
}
</style>

[TheResources.vue]

<template>
	<ul>
		<base-button @click="setComp('StoredResource')" :mode="setComponent=='StoredResource'?'':'flat'">
			Stored Resources
		</base-button>
		<base-button @click="setComp('AddResource')" :mode="setComponent=='AddResource'?'':'flat'">
			Add Resource
		</base-button>
		<component :is="setComponent">

		</component>
	</ul>
</template>

<script>
import StoredResource from '../learning-resource/StoredResource.vue';
import AddResource from '../learning-resource/AddResource.vue';

export default {
	components: {
		StoredResource,
		AddResource,
	},
	data(){
		return{
			setComponent:'',
		};
	},
	methods: {
		setComp(val){
			this.setComponent = val; 
		},
	},
}
</script>

<style>

</style>

[StoredResource.vue]

<template>
		<learning-resource v-for="res in resources" 
				:key="res.id"
				:res="res"
				@rmvRsc="rmvRsc"
		>
		</learning-resource>
</template>

<script>
import LearningResource from './LearningResource.vue'

export default {
	emits: ['rmvRsc'],
	components:{
		LearningResource,
	},
	methods:{
		rmvRsc(val){
			this.$emit('rmvRsc', val);
		}
	},
	data(){
		return{
			resources:[
        {
          id: '1',
          title: 'Google',
          description: 'Learning something by Google!',
          link: 'https://google.com'
        },
        {
          id: '2',
          title: 'Naver',
          description: 'Have you ever had experience with Naver?',
          link: 'https://www.naver.com'
        },
        {
          id: '3',
          title: 'Daum',
          description: 'I am from Hell.',
          link: 'https://www.daum.net'
        },
      ]
		};
	}
}
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: auto;
  max-width: 40rem;
}

</style>

[AddResource.vue]

<template>
	<h1>Add</h1>
</template>

<script>
export default {

}
</script>

<style>

</style>

[LearningResource.vue]

<template>
	<base-card>
		<li>
			<div>
				<header>
					<h2>{{res.title}}</h2>
					<p>{{res.description}}</p>
					<base-button :mode="'flat'">
						Delete
					</base-button>
				</header>
			</div>
			<a :href="link">View Resource</a>
		</li>
	</base-card>
</template>

<script>
import BaseButton from '../UI/BaseButton.vue';
import BaseCard from '../UI/BaseCard.vue';

export default {
  components: { BaseCard, BaseButton },
	props: ['res'],
	methods:{
		rmvRsc(){
			console.log("rmvRec is Running...");
			this.$emit('rmvRsc', this.res.id);
		}
	}
}
</script>

<style scoped>
li {
  margin: auto;
  max-width: 40rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

p {
  margin: 0.5rem 0;
}

a {
  text-decoration: none;
  color: #ce5c00;
}

a:hover,
a:active {
  color: #c89300;
}
/* button{
	background-color:#640032;
	color:white;
	border-radius: 12px;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.26);
} */
</style>