主要练习数据变量对象
以下是修正后的完整代码：
//javascript
export default {
data() {
return {
list: [
{ id: '1', subject: 'Vue.js 前端实战开发', content: '学习指令，例如 v-if、v-for、v-model 等', place: '自习室', status: false }
// 可以在这里添加更多项目...
]
}
}
}
关键点
data() 现在返回一个包含 list 属性的对象
list 被正确定义为数组（使用方括号[]）
对象属性使用引号包裹（更规范的写法）
每个对象之间使用逗号分隔（如果有多个对象）
index.html代码
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
APP.VUE组件代码
<template>
<div id=app>
<div class="card"><!-- 标题区域 -->
<div class="card-header">学习计划表</div><!-- 提交区域 -->
<div class="card-body">
<form @submit.prevent="add">
<div class="row g-4"><!-- 学习科目 -->
<div class="col-auto">
<div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习科目</span>
<input type="text" class="form-control" placeholder="请输入学习科目" v-model="subject"></div>
</div><!-- 学习任务 -->
<div class="col-auto">
<div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span>
<textarea
class="form-control" placeholder="请输入学习内容" style="height: 32px;" v-model="content"></textarea></div>
</div><!-- 学习地点 -->
<div class="col-auto">
<div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习地点</span>
<select class="form-select form-select-sm" v-model="selectedOption">
<option v-for="option in options" :value="option.place" :key="option.placeCode">
{{ option.place }}
</option>
</select>
</div>
</div><!-- 添加按钮 -->
<div class="col-auto"><button type="submit" class="btn btn-primary">添加</button></div>
</div>
</form>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">学习科目</th>
<th scope="col">学习内容</th>
<th scope="col">学习地点</th>
<th scope="col">完成状态</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.subject }}</td>
<td>{{ item.content }}</td>
<td>{{ item.place }}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="'cb' + item.id"
v-model="item.status" />
<label class="form-check-label" for="'cb' + item.id" v-if="item.status">已完成</label>
<label class="form-check-label" for="'cb' + item.id" v-else>未完成</label>
</div>
</td>
<td>
<a href="javascript:;" @click="remove(item.id,item.status)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
data(){
return {
subject:'',
content:'',
nextId:'',
selectedOption:'自习室',
options:[{
placeCode: 0,
place: '自习室',
},
{
placeCode: 1,
place: '图书馆',
},
{
placeCode: 2,
place: '宿舍',
}
],
list:[
{id: '1', subject: 'Vue.js 前端实战开发222', content: '学习指令，例如 v-if、v-for、v-model 等',place: '自习室',status: false}
]
}
},
methods:{
add(){
// alert(1111122222)
if (this.subject === '') {
alert('学习科目为必填项！')
return
}
this.nextId = Math.max(this.list.map(item => item.id)) + 1
let obj = {
id: this.nextId,
subject: this.subject,
content: this.content,
place: this.selectedOption,
status: false,
}
this.list.push(obj)
this.subject = ''
this.content = ''
this.selectedOption = '自习室'
},
remove(id,status){
// alert(id)
if (status) {
this.list = this.list.filter(item => item.id !== id)
} else {
alert('请完成该学习计划后再进行删除操作！')
}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
