主要是看了慕课网的vue3教程,实践其中的案例,分享一下实践中遇到的一些问题
首先感谢慕课网老师的课程,课程地址:课程地址
先看下自己实践的效果,初学者,大佬勿喷
没调整样式,但是功能都实现了,后面上完整代码
实践过程
1.安装vue3环境,这里不多说了,具体可以百度
2.写代码,具体可以参照视频中的案例,这里只分享一下自己写的时候可能会遇到的一些问题
问题
一,新创建的vue3项目,有defineComponent,而视频中没有
defineComponent函数,只是对setup函数进行封装,返回options的对象;在TypeScript下,给予了组件 正确的参数类型推断 。
因为有defineComponent,所以setup最后return的参数跟视频中也不一直,我这里是
return {
state,mousedown,add,dblclick,myinput,deletea}
在dom中调用setup中的参数的时候,需要在参数前面加上state.,比如state.ArrayList.length.
二,根据视频中的代码写了之后,在勾选后,发现并没有将勾选的数据添加到已完成中,发现弹幕中也有同学遇到这个问题,关键代码
FilshArr:computed(()=>state.ArrayList.filter(item=>item.isFilsh))
原因是有的同学在使用computed的时候,可能直接在里面用了return,所以会导致没有数据,箭头函数里如果只有一句执行语句,是省略return的,如果你也遇到了这个情况,不放去掉return试试
三,在实现编辑功能时,无法获取ref中的value
可能出现问题的地方:
1:
import {
ref, computed,defineComponent, onUpdated, reactive } from 'vue';
没有引入 ref
2:
return中没有return dom绑定的ref
return {
state,mousedown,add,dblclick,myinput,deletea}
检查一下,加上即可
总结一下
这个demo中主要用到的js中数组的 过滤(filter)增加(push)删除(splice),ts的一些语法和vue2中常用的指令和计算属性(computed),最后附上完整的代码,有不同问题的可以留言一起讨论
<template>
<div @mousedown = mousedown>
<h3>共有<span type="">{
{
state.ArrayList.length}}</span>个,已完成<span>{
{
state.FilshArr.length}}</span>个</h3>
<ul>
<li v-for="(item,index) in state.ArrayList" :key="index">
<div class="mb-3 form-check" v-if="!item.isFilsh">
<input type="checkbox" class="form-check-input" :id="'item'+index" v-model="item.isFilsh" @click="item.isFilsh = !item.isFilsh">
<label class="form-check-label" v-if="!item.isEditor" @dblclick="dblclick(item,index)">{
{
item.name}}</label>
<input type="text" class="form-control" v-model="item.name" ref="myinput" v-else>
<button type="button" class="btn-close" aria-label="Close" @click="deletea(index)">X</button>
</div>
</li>
</ul>
<div>已完成</div>
<ul>
<li v-for="(item,index) in state.FilshArr" :key="index">
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" :id="'item'+index" v-model="item.isFilsh" disabled>
<label class="form-check-label" :for="'item'+index">{
{
item.name}}</label>
</div>
</li>
</ul>
<h3>添加</h3>
<input type="text" class="form-control" v-model="state.addname">
<button @click="add">添加</button>
</div>
</template>
<script>
import {
ref, computed,defineComponent, onUpdated, reactive } from 'vue';
export default defineComponent({
setup(){
const myinput = ref(null)
const mousedown =(e)=>{
if(myinput.value && e.target != myinput.value){
state.ArrayList[state.Edindex].isEditor=false
}
};
const dblclick =(item,index)=>{
state.Edindex = index
state.ArrayList[index].isEditor = true
};
const add =()=>{
state.ArrayList.push({
name:state.addname,isEditor:false,isFilsh:false})
state.addname =""
};
const deletea =((index)=>{
state.ArrayList.splice(index,1)
});
const state =reactive({
value: "",
addname:"",
Edindex:0,
ArrayList:[
{
name:"1",
isEditor:false,
isFilsh:false
},
{
name:"2",
isEditor:false,
isFilsh:false
},
{
name:"3",
isEditor:false,
isFilsh:false
},
],
FilshArr:computed(()=>state.ArrayList.filter(item=>item.isFilsh))
})
return {
state,mousedown,add,dblclick,myinput,deletea}
}
});
</script>
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>