Vue.js 동적 컴포넌트 및 목록

Vue.js 동적 컴포넌트 및 목록

기본 태스크 목록 구성 요소와 태스크 항목 구성 요소가 있습니다.

 <template>
      <task v-for="(task, index) in tasks" :is="task" >{{ task.name }}</task>
 </template>

작업에는 다음과 같은 편집 버튼이 있습니다.

<template>  
    <slot></slot>
    <button v-on:click="$emit('edit')">Edit</button>    
</template> 

편집을 클릭했을 때 특정 태스크 컴포넌트를 태스크 편집으로 쉽게 변경할 수 있는 방법이 있습니까?

이 페이지의 HTML은 다음과 같습니다.

<task-list></task-list>

업데이트: 여기 내 바이올린입니다.

사용할 구성 요소를 나타내는 모드를 추가하고 설정합니다.:is="task.mode".

<div id="app">
  <list></list>
</div>

<template id="list-template">
  <div>
    <component v-for='task in tasks' 
               :is='task.mode' 
               :task='task'
               @edit="edit"
               @save="save">
    </component>
  </div>
</template>

<template id="task-template">
  <div>
    <h1>{{task.text}}</h1>
    <button @click="$emit('edit', task)">Edit</button>
   </div>
</template>

<template id="task-edit-template">
  <div>
    <input type="text" :value="task.text">
    <button @click="$emit('save', task)">Save</button>
   </div>
</template>

코드

Vue.component("list",{
  template:"#list-template",
  data(){
    return {
      tasks:[{text: "task1", mode:"task"}, {text: "task1", mode:"task"}]
    }
  },
  methods:{
    edit(task){
      task.mode = "task-edit"
    },
    save(task){
      task.mode = "task"
    }
  }
})

Vue.component("task", {
  props:["task"],
  template:"#task-template",
})

Vue.component("task-edit",{
  props:["task"],
  template:"#task-edit-template"
})

new Vue({
  el:"#app"
})

작업 예참고: 실제로 편집 내용을 저장하지 않습니다.

언급URL : https://stackoverflow.com/questions/42822181/vue-js-dynamic-components-and-lists