Создания компонента

Question

Хочу создать компонент для его повторного вызова Компонент не работает ((

Vue.component('v-app', {
		template: `
		<div class="show-modal" v-show="itemPost" >
			<h1>Item-Post</h1>
			{{ item.userId }} <br>
			{{ item.id }} <br>
			{{ item.title }} <br>
			{{ item.body }} <br>
		</div>
		`
	});
	let semple=new Vue({
		el: '#app',
		data: {
		    userId: '',
		    id: '',
		    title: '',
		    body: '',
		    posts: null,

		    item: '',
		    itemPost: false
		},
		methods: {
		Puslished(){
				this.posts.push({
					userId:this.userId, 
					id:this.id,
					title:this.title,
					body:this.body
				});
			},
		clickBookModal(i) {
				this.itemPost = true;
				this.item = this.posts[i]
			},
		DeleteItemPost(i) { 
				this.posts.splice(i, 1);
			}
		},
		mounted() {
			axios.get('https://jsonplaceholder.typicode.com/posts')
			.then(response => this.posts=response.data);
		}
	})

.post-wrapper ul{
	margin: 5px;
	width: 120px;
	border: 2px solid orange;
}

.post-wrapper {
	display: flex;
	flex-wrap: wrap;
}

<div id="app">

	<input type="text" placeholder="userId" v-model="userId">
	<input type="text" placeholder="id" v-model="id">
	<input type="text" placeholder="title" v-model="title">
	<input type="text" placeholder="body" v-model="body">
	<div v-show="userId"><b>UserId</b> -{{ userId }}</div>
	<div v-show="id"><b>Id</b> -{{ id }}</div>
	<div v-show="title"><b>Title</b> -{{ title }}</div>
	<div v-show="body"><b>Body</b> -{{ body }}</div>

	<button @click="Puslished">Push in Posts</button>
	

	<!-- SHOW ON CLICK ITEM -->
	<v-app></v-app>
	
	<!-- show -->

	<div class="post-wrapper">
		<ul v-for="(post, i) in posts" class="box" @click="clickBookModal(i)">
			<li  v-html="post.userId" class="user-id"></li>
			<li  v-html="post.id" class="post-id"></li>
			<li  v-html="post.title" class="post-title"></li>
			<li  v-html="post.body" class="post-body"></li>
			<button @click="DeleteItemPost(i)">Delete!</button>
		</ul>
	</div>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Answer 1

Входные параметры — это пользовательские атрибуты, которые вы можете установить на компоненте. Когда значение передаётся в атрибут входного параметра, оно становится свойством экземпляра компонента.

<v-app :item="item" v-show="itemPost" @close="closeBookModal"></v-app>

и

Vue.component('v-app', {
props: ['item'],
    template: `
    <div class="show-modal">
        <h1>Item-Post</h1>
        {{ item.userId }} <br>
        {{ item.id }} <br>
        {{ item.title }} <br>
        {{ item.body }} <br>
    </div>
    `
});

Использовал информацию по ссылке - Передача данных в дочерние компоненты через входные параметры

Рабочий пример:

Vue.component('v-app', {
  props: ['item'],
  template: `
		<div class="show-modal">
			<h1>Item-Post</h1>
			{{ item.userId }} <br>
			{{ item.id }} <br>
			{{ item.title }} <br>
			{{ item.body }} <br>
      <button @click="$emit('close')">Close</button>
		</div>
		`
});
let semple = new Vue({
  el: '#app',
  data: {
    userId: '',
    id: '',
    title: '',
    body: '',
    posts: null,

    item: '',
    itemPost: false
  },
  methods: {
    Puslished() {
      this.posts.push({
        userId: this.userId,
        id: this.id,
        title: this.title,
        body: this.body
      });
    },
    clickBookModal(i) {
      this.itemPost = true;
      this.item = this.posts[i]
    },
    closeBookModal() {
      this.itemPost = false;
      this.item = null;
    },
    DeleteItemPost(i) {
      this.posts.splice(i, 1);
    }
  },
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => this.posts = response.data);
  }
})

.post-wrapper ul {
  margin: 5px;
  width: 120px;
  border: 2px solid orange;
}
.post-wrapper ul:hover {
  border-color: black;
  cursor: pointer;
}

.post-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.show-modal {
  width: 100%;
  position: fixed;
  top: 0;
  background: white;
  height: 100%;
  left: 0;
}

<div id="app">

  <input type="text" placeholder="userId" v-model="userId">
  <input type="text" placeholder="id" v-model="id">
  <input type="text" placeholder="title" v-model="title">
  <input type="text" placeholder="body" v-model="body">
  <div v-show="userId"><b>UserId</b> -{{ userId }}</div>
  <div v-show="id"><b>Id</b> -{{ id }}</div>
  <div v-show="title"><b>Title</b> -{{ title }}</div>
  <div v-show="body"><b>Body</b> -{{ body }}</div>

  <button @click="Puslished">Push in Posts</button>


  <!-- SHOW ON CLICK ITEM -->
  <v-app :item="item" v-show="itemPost" @close="closeBookModal"></v-app>

  <!-- show -->

  <div class="post-wrapper">
    <ul v-for="(post, i) in posts" class="box" @click="clickBookModal(i)">
      <li v-html="post.userId" class="user-id"></li>
      <li v-html="post.id" class="post-id"></li>
      <li v-html="post.title" class="post-title"></li>
      <li v-html="post.body" class="post-body"></li>
      <button @click.stop="DeleteItemPost(i)">Delete!</button>
    </ul>
  </div>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

БЛОГ НА HUSL

Создания компонента

Ответы (1 шт):