[英]Enabling dynamic input in Vue.js vue-kanban plugin
我正在嘗試動態輸入Vue.js vue-kanban插件( https://github.com/BrockReece/vue-kanban )。 到目前為止,我已經成功創建了一個方法,將用戶輸入推送到動態創建的塊中,狀態設置為“on-hold”,以便創建的塊默認在初始“on-hold”階段呈現,然后啟用用於拖放到每個階段。 問題是我不得不手動輸入除標題之外的每個塊的id。 我希望每個塊都有一個唯一的id,而不必手動輸入一個。 此外,控制台返回一個錯誤,指示實例上未定義“title”的屬性或方法,但在呈現期間引用。 解決這兩個問題的最佳方法是什么? 這是我的代碼。 謝謝!
//App.vue
<template>
<div id="app">
<div class="input-container">
<input type="number" placeholder="id" v-model="id"/>
<input type="text" placeholder="title" v-model="title"/>
<button type="button" v-on:click="addBlock()">Add</button>
</div>
<kanban-board :stages="stages" :blocks="blocks">
<div v-for="stage in stages" :slot="stage" :key="stage">
<h2>{{ stage }}</h2>
</div>
<div v-for="block in blocks" :slot="block.id" :key="block.id">
<div>
<strong>id:</strong> {{ block.id }}
</div>
<div>
{{ block.title }}
</div>
</div>
</kanban-board>
</div>
</template>
<script>
export default {
name: 'app',
id: null,
title: null,
data () {
return {
stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
blocks: [],
}
},
methods: {
addBlock(){
this.blocks.push({
id: this.id,
status: "on-hold",
title: this.title
});
this.status = "";
this.title = "";
}
}
}
</script>
<style lang="scss">
@import './assets/kanban.scss';
.input-container {
width: 50%;
margin: 0 auto;
}
</style>
我希望每個塊都有一個唯一的id,而不必手動輸入一個。
也許這會解決問題。
<template>
<div id="app">
<div class="input-container">
<input type="text" placeholder="title" v-model="title"/>
<button type="button" v-on:click="addBlock()">Add</button>
</div>
<kanban-board :stages="stages" :blocks="blocks">
<div v-for="stage in stages" :slot="stage" :key="stage">
<h2>{{ stage }}</h2>
</div>
<div v-for="block in blocks" :slot="block.id" :key="block.id">
<div>
<strong>id:</strong> {{ block.id }}
</div>
<div>
{{ block.title }}
</div>
</div>
</kanban-board>
</div>
</template>
<script>
export default {
name: 'app',
id: 0,
title: null,
data () {
return {
stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
blocks: [],
}
},
methods: {
addBlock(){
this.blocks.push({
id: this.id,
status: "on-hold",
title: this.title
});
this.id += 1;
this.status = "";
this.title = "";
}
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.