<span>{{ itemInfo }}</span><div v-for="item in itemInfoList" :key="item" @click="checked(item, itemInfo)">{{ item }}</div><span>{{ sortInfo }}</span><div v-for="item in sortList" :key="item" @click="checked(item, sortInfo)">{{ item }}</div><script setup>const itemInfoList = ref(["全部项目", "已加入", "未加入"]); let itemInfo = ref(itemInfoList.value[0]); //排序数据 const sortList = ref(["创建时间倒序", "创建时间正序", "项目名称倒序", "项目名称正序"]); let sortInfo = ref(sortList.value[0]);function checked(item, target) { target.value = item; }<script>checked方法报错Cannot create property 'value' on string ，checked方法要怎么写

很抱歉，我之前的回答有误。在Vue 3中，我们不能直接为响应式的基本类型（如字符串）添加属性。为了解决这个问题，我们可以将`itemInfo`和`sortInfo`定义为包含`value`属性的对象。以下是修正后的代码：

<template>
  <div>
    <span>{{ itemInfo.value }}</span>
    <div v-for="item in itemInfoList" :key="item" @click="checked(item, itemInfo)">{{ item }}</div>
    <span>{{ sortInfo.value }}</span>
    <div v-for="item in sortList" :key="item" @click="checked(item, sortInfo)">{{ item }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const itemInfoList = ref(["全部项目", "已加入", "未加入"]);
const itemInfo = ref({ value: itemInfoList.value[0] });

const sortList = ref(["创建时间倒序", "创建时间正序", "项目名称倒序", "项目名称正序"]);
const sortInfo = ref({ value: sortList.value[0] });

// 复用的 checked 方法
function checked(item, target) {
  target.value = item;
}
</script>

通过将`itemInfo`和`sortInfo`定义为包含`value`属性的对象，我们可以在`checked`方法中修改其值。这样就可以避免报错了。