我是 Vue JS 的新手，并且一直在從提供的檔案中學習它。我的專案是添加網路應用程式的簡單任務。在使用 v-model 指令時，我沒有得到任何輸出。我添加任務的javascript函式顯然沒有被呼叫。
<template>
<div id="text">
TASKS:
<form onsubmit="return addTodo()">
<input type="text" class="todo-input" placeholder="What's up" v-model="message">
<input type="date" class="todo-input" v-model="ddate" >
<input type="submit" value="Add">
</form>
<div v-for="(todo, index) in todos" :key="todo.id" class="todo-item">
<div>
{{todo.id}}{{todo.title}}{{todo.date}}
</div>
</div>
</div>
</div>
</template>
export default {
name: 'todo-list',
data () {
return {
message: '',
ddate: '',
idForTodo: 1,
todos: [
]
}
},
methods: {
addTodo(){
if(this.message.trim().length == 0){
return
}
this.todos.push({
id: this.idForTodo,
title: this.message,
completed: false,
editing: false,
date: this.ddate,
})
this.ddate = ''
this.message = ''
this.idForTodo
},
}
}
uj5u.com熱心網友回復：
看起來有人在我寫答案時用正確的代碼編輯了這個問題。我在代碼片段中嘗試并測驗了相同的代碼，它正在作業。
const app = new Vue({
el: '#text',
data() {
return {
message: '',
ddate: '',
idForTodo: 1,
todos: [
]
}
},
methods: {
addTodo(){
console.log(this.message)
if(this.message.trim().length == 0){
return
}
this.todos.push({
id: this.idForTodo,
title: this.message,
completed: false,
editing: false,
date: this.ddate,
})
this.ddate = ''
this.message = ''
this.idForTodo
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="text">
TASKS:
<form>
<input type="text" class="todo-input" placeholder="What's up" v-model="message">
<input type="date" class="todo-input" v-model="ddate" >
<button v-on:click.prevent="addTodo">Add</button>
</form>
<div v-for="(todo, index) in todos" :key="todo.id" class="todo-item">
<div>
{{todo.id}} {{todo.title}} {{todo.date}}
</div>
</div>
</div>uj5u.com熱心網友回復：
如果您要存盤一組收音機中的值。屬性中的按鈕，您需要識別按鈕。不是用 id，而是用一個值。嘗試這個：
{{data.variant}}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426739.html
標籤：javascript Vue.js Vuejs2 v型 Vue-sfc
下一篇：如何在Mysql中使用計數？