vue3,v-model

Question

vue2+TS 实现一个简单的购物车功能，v-model绑定一个数组，选中，绑定的数组checkList并未有数据更新

  <template>
    <div id="box">
      <ul>
        <li>
          <div>
            <input type="checkbox" name="" id="">
            <span>全选/全不选</span>
          </div>
        </li>
        <li v-for="item in dataList" :key="item.id">
          <div>
            <input type="checkbox"  v-model="checkList" :value="item">
          </div>
          <div>
            <img :src="item.poster" alt="">
          </div>
          <div>
            <div>{{ item.title }}</div>
            <div style="color: red;">价格1： {{ item.price }}</div>
          </div>

          <div>
            <button>-</button>
            {{ item.number }}

            <button>+</button>
          </div>
        
          <div>
            <button>删除</button>
          </div>
        </li>
      </ul>
      {{ checkList }}
    </div>
</template>

<script setup lang="ts">
import getList from '@/api/login.ts';
import { onMounted, reactive} from 'vue'


    let dataList:Array<any> = reactive([])
    let checkList = reactive([]) 

Answer 1

【相关推荐】

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue3+ts项目使用自定义指令实现根据角色权限控制显示隐藏
• 除此之外, 这篇博客: Vue（十七）：Vue3+ts 入门中的 在组件上使用 v-model 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  // 父组件
  <template>
      <p>父</p>
      <input v-model="firstName">
      <input type="text" v-model="lastName">
      <hr>
      <Child v-model:first-name="firstName" v-model:last-name="lastName"/>
  </template>
  <script setup lang="ts">
  import {ref} from "vue";
  import Child from './Child.vue';
  
  const firstName = ref('Prosper');
  const lastName = ref('Lee');
  </script>
  
  // 子组件
  <template>
      <p>子</p>
      <input :value="firstName" @input="$emit('update:firstName', $event.target.value)">
      <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)">
  </template>
  <script setup lang="ts">
  import {defineEmits, defineProps} from "vue";
  
  defineProps(['firstName', 'lastName'])
  defineEmits(['update:firstName', 'update:lastName']);
  </script>
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^